Introduce and use `CrossAlign` enum for `Column` and `Row`

33 files changed, 166 insertions, 115 deletions

diff --git a/core/src/align.rs b/core/src/align.rs
index aa8838c6..ad0d8a25 100644
--- a/core/src/align.rs
+++ b/core/src/align.rs
@@ -9,11 +9,34 @@ pub enum Align {
 
     /// Align at the end of the axis.
     End,
+}
+
+/// Alignment on the cross axis of a container.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+pub enum CrossAlign {
+    /// Align at the start of the axis.
+    Start,
+
+    /// Align at the center of the axis.
+    Center,
+
+    /// Align at the end of the axis.
+    End,
 
     /// Fill the entire axis.
     Fill,
 }
 
+impl From<Align> for CrossAlign {
+    fn from(align: Align) -> Self {
+        match align {
+            Align::Start => Self::Start,
+            Align::Center => Self::Center,
+            Align::End => Self::End,
+        }
+    }
+}
+
 /// The horizontal alignment of some resource.
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum HorizontalAlignment {
diff --git a/core/src/lib.rs b/core/src/lib.rs
index e937264d..b0aa4e12 100644
--- a/core/src/lib.rs
+++ b/core/src/lib.rs
@@ -29,7 +29,7 @@ mod rectangle;
 mod size;
 mod vector;
 
-pub use align::{Align, HorizontalAlignment, VerticalAlignment};
+pub use align::{Align, CrossAlign, HorizontalAlignment, VerticalAlignment};
 pub use background::Background;
 pub use color::Color;
 pub use font::Font;
diff --git a/examples/bezier_tool/src/main.rs b/examples/bezier_tool/src/main.rs
index 97832e01..b17f5726 100644
--- a/examples/bezier_tool/src/main.rs
+++ b/examples/bezier_tool/src/main.rs
@@ -1,6 +1,7 @@
 //! This example showcases an interactive `Canvas` for drawing Bézier curves.
 use iced::{
-    button, Align, Button, Column, Element, Length, Sandbox, Settings, Text,
+    button, Button, Column, CrossAlign, Element, Length, Sandbox, Settings,
+    Text,
 };
 
 pub fn main() -> iced::Result {
@@ -51,7 +52,7 @@ impl Sandbox for Example {
         Column::new()
             .padding(20)
             .spacing(20)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(
                 Text::new("Bezier tool example")
                     .width(Length::Shrink)
diff --git a/examples/color_palette/src/main.rs b/examples/color_palette/src/main.rs
index bb2c61cb..90277186 100644
--- a/examples/color_palette/src/main.rs
+++ b/examples/color_palette/src/main.rs
@@ -1,8 +1,8 @@
 use iced::canvas::{self, Cursor, Frame, Geometry, Path};
 use iced::{
-    slider, Align, Canvas, Color, Column, Element, HorizontalAlignment, Length,
-    Point, Rectangle, Row, Sandbox, Settings, Size, Slider, Text, Vector,
-    VerticalAlignment,
+    slider, Canvas, Color, Column, CrossAlign, Element, HorizontalAlignment,
+    Length, Point, Rectangle, Row, Sandbox, Settings, Size, Slider, Text,
+    Vector, VerticalAlignment,
 };
 use palette::{self, Hsl, Limited, Srgb};
 use std::marker::PhantomData;
@@ -298,7 +298,7 @@ impl<C: 'static + ColorSpace + Copy> ColorPicker<C> {
 
         Row::new()
             .spacing(10)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(Text::new(C::LABEL).width(Length::Units(50)))
             .push(slider(s1, cr1, c1, move |v| C::new(v, c2, c3)))
             .push(slider(s2, cr2, c2, move |v| C::new(c1, v, c3)))
diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs
index e0b2ebd6..710849ea 100644
--- a/examples/counter/src/main.rs
+++ b/examples/counter/src/main.rs
@@ -1,4 +1,6 @@
-use iced::{button, Align, Button, Column, Element, Sandbox, Settings, Text};
+use iced::{
+    button, Button, Column, CrossAlign, Element, Sandbox, Settings, Text,
+};
 
 pub fn main() -> iced::Result {
     Counter::run(Settings::default())
@@ -42,7 +44,7 @@ impl Sandbox for Counter {
     fn view(&mut self) -> Element<Message> {
         Column::new()
             .padding(20)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(
                 Button::new(&mut self.increment_button, Text::new("Increment"))
                     .on_press(Message::IncrementPressed),
diff --git a/examples/custom_widget/src/main.rs b/examples/custom_widget/src/main.rs
index 36f468c7..ce7fe9af 100644
--- a/examples/custom_widget/src/main.rs
+++ b/examples/custom_widget/src/main.rs
@@ -84,7 +84,7 @@ mod circle {
 
 use circle::Circle;
 use iced::{
-    slider, Align, Column, Container, Element, Length, Sandbox, Settings,
+    slider, Column, Container, CrossAlign, Element, Length, Sandbox, Settings,
     Slider, Text,
 };
 
@@ -129,7 +129,7 @@ impl Sandbox for Example {
             .padding(20)
             .spacing(20)
             .max_width(500)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(Circle::new(self.radius))
             .push(Text::new(format!("Radius: {:.2}", self.radius)))
             .push(
diff --git a/examples/download_progress/src/main.rs b/examples/download_progress/src/main.rs
index cd024926..a6dd54ba 100644
--- a/examples/download_progress/src/main.rs
+++ b/examples/download_progress/src/main.rs
@@ -1,6 +1,6 @@
 use iced::{
-    button, executor, Align, Application, Button, Column, Command, Container,
-    Element, Length, ProgressBar, Settings, Subscription, Text,
+    button, executor, Application, Button, Column, Command, Container,
+    CrossAlign, Element, Length, ProgressBar, Settings, Subscription, Text,
 };
 
 mod download;
@@ -83,7 +83,7 @@ impl Application for Example {
                     .on_press(Message::Add)
                     .padding(10),
             )
-            .align_items(Align::End);
+            .align_items(CrossAlign::End);
 
         Container::new(downloads)
             .width(Length::Fill)
@@ -182,7 +182,7 @@ impl Download {
             }
             State::Finished { button } => Column::new()
                 .spacing(10)
-                .align_items(Align::Center)
+                .align_items(CrossAlign::Center)
                 .push(Text::new("Download finished!"))
                 .push(
                     Button::new(button, Text::new("Start again"))
@@ -195,7 +195,7 @@ impl Download {
             }
             State::Errored { button } => Column::new()
                 .spacing(10)
-                .align_items(Align::Center)
+                .align_items(CrossAlign::Center)
                 .push(Text::new("Something went wrong :("))
                 .push(
                     Button::new(button, Text::new("Try again"))
@@ -207,7 +207,7 @@ impl Download {
         Column::new()
             .spacing(10)
             .padding(10)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(progress_bar)
             .push(control)
             .into()
diff --git a/examples/events/src/main.rs b/examples/events/src/main.rs
index 911ff425..398b321f 100644
--- a/examples/events/src/main.rs
+++ b/examples/events/src/main.rs
@@ -1,7 +1,7 @@
 use iced::{
-    button, executor, Align, Application, Button, Checkbox, Column, Command,
-    Container, Element, HorizontalAlignment, Length, Settings, Subscription,
-    Text,
+    button, executor, Application, Button, Checkbox, Column, Command,
+    Container, CrossAlign, Element, HorizontalAlignment, Length, Settings,
+    Subscription, Text,
 };
 use iced_native::{window, Event};
 
@@ -98,7 +98,7 @@ impl Application for Events {
         .on_press(Message::Exit);
 
         let content = Column::new()
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .spacing(20)
             .push(events)
             .push(toggle)
diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs
index bc6c3708..38f4fcbd 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -11,8 +11,8 @@ use iced::slider::{self, Slider};
 use iced::time;
 use iced::window;
 use iced::{
-    Align, Application, Checkbox, Column, Command, Container, Element, Length,
-    Row, Settings, Subscription, Text,
+    Application, Checkbox, Column, Command, Container, CrossAlign, Element,
+    Length, Row, Settings, Subscription, Text,
 };
 use preset::Preset;
 use std::time::{Duration, Instant};
@@ -844,7 +844,7 @@ impl Controls {
 
         let speed_controls = Row::new()
             .width(Length::Fill)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .spacing(10)
             .push(
                 Slider::new(
@@ -860,7 +860,7 @@ impl Controls {
         Row::new()
             .padding(10)
             .spacing(20)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(playback_controls)
             .push(speed_controls)
             .push(
diff --git a/examples/geometry/src/main.rs b/examples/geometry/src/main.rs
index f650b2c1..733efca7 100644
--- a/examples/geometry/src/main.rs
+++ b/examples/geometry/src/main.rs
@@ -161,8 +161,8 @@ mod rainbow {
 }
 
 use iced::{
-    scrollable, Align, Column, Container, Element, Length, Sandbox, Scrollable,
-    Settings, Text,
+    scrollable, Column, Container, CrossAlign, Element, Length, Sandbox,
+    Scrollable, Settings, Text,
 };
 use rainbow::Rainbow;
 
@@ -194,7 +194,7 @@ impl Sandbox for Example {
             .padding(20)
             .spacing(20)
             .max_width(500)
-            .align_items(Align::Start)
+            .align_items(CrossAlign::Start)
             .push(Rainbow::new())
             .push(Text::new(
                 "In this example we draw a custom widget Rainbow, using \
diff --git a/examples/integration_opengl/src/controls.rs b/examples/integration_opengl/src/controls.rs
index ddc6827c..ebf64d43 100644
--- a/examples/integration_opengl/src/controls.rs
+++ b/examples/integration_opengl/src/controls.rs
@@ -1,6 +1,6 @@
 use iced_glow::Renderer;
 use iced_glutin::{
-    slider, Align, Color, Column, Command, Element, Length, Program, Row,
+    slider, Color, Column, Command, CrossAlign, Element, Length, Program, Row,
     Slider, Text,
 };
 
@@ -79,11 +79,11 @@ impl Program for Controls {
         Row::new()
             .width(Length::Fill)
             .height(Length::Fill)
-            .align_items(Align::End)
+            .align_items(CrossAlign::End)
             .push(
                 Column::new()
                     .width(Length::Fill)
-                    .align_items(Align::End)
+                    .align_items(CrossAlign::End)
                     .push(
                         Column::new()
                             .padding(10)
diff --git a/examples/integration_wgpu/src/controls.rs b/examples/integration_wgpu/src/controls.rs
index 824f9f53..e7654038 100644
--- a/examples/integration_wgpu/src/controls.rs
+++ b/examples/integration_wgpu/src/controls.rs
@@ -1,6 +1,6 @@
 use iced_wgpu::Renderer;
 use iced_winit::{
-    slider, Align, Color, Column, Command, Element, Length, Program, Row,
+    slider, Color, Column, Command, CrossAlign, Element, Length, Program, Row,
     Slider, Text,
 };
 
@@ -79,11 +79,11 @@ impl Program for Controls {
         Row::new()
             .width(Length::Fill)
             .height(Length::Fill)
-            .align_items(Align::End)
+            .align_items(CrossAlign::End)
             .push(
                 Column::new()
                     .width(Length::Fill)
-                    .align_items(Align::End)
+                    .align_items(CrossAlign::End)
                     .push(
                         Column::new()
                             .padding(10)
diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index 5a134756..737c9126 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -1,7 +1,8 @@
 use iced::{
-    button, executor, keyboard, pane_grid, scrollable, Align, Application,
-    Button, Color, Column, Command, Container, Element, HorizontalAlignment,
-    Length, PaneGrid, Row, Scrollable, Settings, Subscription, Text,
+    button, executor, keyboard, pane_grid, scrollable, Application, Button,
+    Color, Column, Command, Container, CrossAlign, Element,
+    HorizontalAlignment, Length, PaneGrid, Row, Scrollable, Settings,
+    Subscription, Text,
 };
 use iced_native::{event, subscription, Event};
 
@@ -329,7 +330,7 @@ impl Content {
         let content = Scrollable::new(scroll)
             .width(Length::Fill)
             .spacing(10)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(controls);
 
         Container::new(content)
diff --git a/examples/pick_list/src/main.rs b/examples/pick_list/src/main.rs
index 1eec9791..363d3222 100644
--- a/examples/pick_list/src/main.rs
+++ b/examples/pick_list/src/main.rs
@@ -1,5 +1,5 @@
 use iced::{
-    pick_list, scrollable, Align, Container, Element, Length, PickList,
+    pick_list, scrollable, Container, CrossAlign, Element, Length, PickList,
     Sandbox, Scrollable, Settings, Space, Text,
 };
 
@@ -49,7 +49,7 @@ impl Sandbox for Example {
 
         let mut content = Scrollable::new(&mut self.scroll)
             .width(Length::Fill)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .spacing(10)
             .push(Space::with_height(Length::Units(600)))
             .push(Text::new("Which is your favorite language?"))
diff --git a/examples/pokedex/src/main.rs b/examples/pokedex/src/main.rs
index fdf667cc..aa57aae3 100644
--- a/examples/pokedex/src/main.rs
+++ b/examples/pokedex/src/main.rs
@@ -1,6 +1,6 @@
 use iced::{
-    button, futures, image, Align, Application, Button, Column, Command,
-    Container, Element, Length, Row, Settings, Text,
+    button, futures, image, Application, Button, Column, Command, Container,
+    CrossAlign, Element, Length, Row, Settings, Text,
 };
 
 pub fn main() -> iced::Result {
@@ -85,14 +85,14 @@ impl Application for Pokedex {
             Pokedex::Loaded { pokemon, search } => Column::new()
                 .max_width(500)
                 .spacing(20)
-                .align_items(Align::End)
+                .align_items(CrossAlign::End)
                 .push(pokemon.view())
                 .push(
                     button(search, "Keep searching!").on_press(Message::Search),
                 ),
             Pokedex::Errored { try_again, .. } => Column::new()
                 .spacing(20)
-                .align_items(Align::End)
+                .align_items(CrossAlign::End)
                 .push(Text::new("Whoops! Something went wrong...").size(40))
                 .push(button(try_again, "Try again").on_press(Message::Search)),
         };
@@ -121,7 +121,7 @@ impl Pokemon {
     fn view(&mut self) -> Element<Message> {
         Row::new()
             .spacing(20)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(image::Viewer::new(
                 &mut self.image_viewer,
                 self.image.clone(),
@@ -131,7 +131,7 @@ impl Pokemon {
                     .spacing(20)
                     .push(
                         Row::new()
-                            .align_items(Align::Center)
+                            .align_items(CrossAlign::Center)
                             .spacing(20)
                             .push(
                                 Text::new(&self.name)
diff --git a/examples/qr_code/src/main.rs b/examples/qr_code/src/main.rs
index 37b4855d..73c2e058 100644
--- a/examples/qr_code/src/main.rs
+++ b/examples/qr_code/src/main.rs
@@ -1,7 +1,7 @@
 use iced::qr_code::{self, QRCode};
 use iced::text_input::{self, TextInput};
 use iced::{
-    Align, Column, Container, Element, Length, Sandbox, Settings, Text,
+    Column, Container, CrossAlign, Element, Length, Sandbox, Settings, Text,
 };
 
 pub fn main() -> iced::Result {
@@ -62,7 +62,7 @@ impl Sandbox for QRGenerator {
         let mut content = Column::new()
             .width(Length::Units(700))
             .spacing(20)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(title)
             .push(input);
 
diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs
index 983cf3e6..41b3eb37 100644
--- a/examples/stopwatch/src/main.rs
+++ b/examples/stopwatch/src/main.rs
@@ -1,6 +1,6 @@
 use iced::{
-    button, executor, time, Align, Application, Button, Column, Command,
-    Container, Element, HorizontalAlignment, Length, Row, Settings,
+    button, executor, time, Application, Button, Column, Command, Container,
+    CrossAlign, Element, HorizontalAlignment, Length, Row, Settings,
     Subscription, Text,
 };
 use std::time::{Duration, Instant};
@@ -130,7 +130,7 @@ impl Application for Stopwatch {
             .push(reset_button);
 
         let content = Column::new()
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .spacing(20)
             .push(duration)
             .push(controls);
diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs
index 7bc49281..4a004f3f 100644
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@@ -1,7 +1,7 @@
 use iced::{
-    button, scrollable, slider, text_input, Align, Button, Checkbox, Column,
-    Container, Element, Length, ProgressBar, Radio, Row, Rule, Sandbox,
-    Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
+    button, scrollable, slider, text_input, Button, Checkbox, Column,
+    Container, CrossAlign, Element, Length, ProgressBar, Radio, Row, Rule,
+    Sandbox, Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -132,7 +132,7 @@ impl Sandbox for Styling {
                 Row::new()
                     .spacing(10)
                     .height(Length::Units(100))
-                    .align_items(Align::Center)
+                    .align_items(CrossAlign::Center)
                     .push(scrollable)
                     .push(Rule::vertical(38).style(self.theme))
                     .push(
diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs
index 7a8ecc1a..6e798f32 100644
--- a/examples/todos/src/main.rs
+++ b/examples/todos/src/main.rs
@@ -1,6 +1,6 @@
 use iced::{
-    button, scrollable, text_input, Align, Application, Button, Checkbox,
-    Column, Command, Container, Element, Font, HorizontalAlignment, Length,
+    button, scrollable, text_input, Application, Button, Checkbox, Column,
+    Command, Container, CrossAlign, Element, Font, HorizontalAlignment, Length,
     Row, Scrollable, Settings, Text, TextInput,
 };
 use serde::{Deserialize, Serialize};
@@ -295,7 +295,7 @@ impl Task {
 
                 Row::new()
                     .spacing(20)
-                    .align_items(Align::Center)
+                    .align_items(CrossAlign::Center)
                     .push(checkbox)
                     .push(
                         Button::new(edit_button, edit_icon())
@@ -320,7 +320,7 @@ impl Task {
 
                 Row::new()
                     .spacing(20)
-                    .align_items(Align::Center)
+                    .align_items(CrossAlign::Center)
                     .push(text_input)
                     .push(
                         Button::new(
@@ -369,7 +369,7 @@ impl Controls {
 
         Row::new()
             .spacing(20)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(
                 Text::new(&format!(
                     "{} {} left",
diff --git a/examples/tooltip/src/main.rs b/examples/tooltip/src/main.rs
index d6c8b8e1..f6b5dc0e 100644
--- a/examples/tooltip/src/main.rs
+++ b/examples/tooltip/src/main.rs
@@ -1,7 +1,8 @@
 use iced::tooltip::{self, Tooltip};
 use iced::{
-    button, Button, Column, Container, Element, HorizontalAlignment, Length,
-    Row, Sandbox, Settings, Text, VerticalAlignment,
+    button, Button, Column, Container, CrossAlign, Element,
+    HorizontalAlignment, Length, Row, Sandbox, Settings, Text,
+    VerticalAlignment,
 };
 
 pub fn main() {
@@ -60,7 +61,7 @@ impl Sandbox for Example {
         ])
         .width(Length::Fill)
         .height(Length::Fill)
-        .align_items(iced::Align::Center)
+        .align_items(CrossAlign::Center)
         .spacing(50);
 
         let follow_cursor = tooltip(
diff --git a/native/src/layout/flex.rs b/native/src/layout/flex.rs
index 52b48fec..dfb5288b 100644
--- a/native/src/layout/flex.rs
+++ b/native/src/layout/flex.rs
@@ -19,7 +19,7 @@
 
 use crate::{
     layout::{Limits, Node},
-    Align, Element, Padding, Point, Size,
+    CrossAlign, Element, Padding, Point, Size,
 };
 
 /// The main axis of a flex layout.
@@ -65,7 +65,7 @@ pub fn resolve<Message, Renderer>(
     limits: &Limits,
     padding: Padding,
     spacing: f32,
-    align_items: Align,
+    align_items: CrossAlign,
     items: &[Element<'_, Message, Renderer>],
 ) -> Node
 where
@@ -82,7 +82,7 @@ where
     let mut nodes: Vec<Node> = Vec::with_capacity(items.len());
     nodes.resize(items.len(), Node::default());
 
-    if align_items == Align::Fill {
+    if align_items == CrossAlign::Fill {
         let mut fill_cross = axis.cross(limits.min());
 
         items.iter().for_each(|child| {
@@ -116,13 +116,13 @@ where
         .fill_factor();
 
         if fill_factor == 0 {
-            let (min_width, min_height) = if align_items == Align::Fill {
+            let (min_width, min_height) = if align_items == CrossAlign::Fill {
                 axis.pack(0.0, cross)
             } else {
                 axis.pack(0.0, 0.0)
             };
 
-            let (max_width, max_height) = if align_items == Align::Fill {
+            let (max_width, max_height) = if align_items == CrossAlign::Fill {
                 axis.pack(available, cross)
             } else {
                 axis.pack(available, max_cross)
@@ -138,7 +138,7 @@ where
 
             available -= axis.main(size);
 
-            if align_items != Align::Fill {
+            if align_items != CrossAlign::Fill {
                 cross = cross.max(axis.cross(size));
             }
 
@@ -165,13 +165,13 @@ where
                 max_main
             };
 
-            let (min_width, min_height) = if align_items == Align::Fill {
+            let (min_width, min_height) = if align_items == CrossAlign::Fill {
                 axis.pack(min_main, cross)
             } else {
                 axis.pack(min_main, axis.cross(limits.min()))
             };
 
-            let (max_width, max_height) = if align_items == Align::Fill {
+            let (max_width, max_height) = if align_items == CrossAlign::Fill {
                 axis.pack(max_main, cross)
             } else {
                 axis.pack(max_main, max_cross)
@@ -184,7 +184,7 @@ where
 
             let layout = child.layout(renderer, &child_limits);
 
-            if align_items != Align::Fill {
+            if align_items != CrossAlign::Fill {
                 cross = cross.max(axis.cross(layout.size()));
             }
 
@@ -206,10 +206,18 @@ where
 
         match axis {
             Axis::Horizontal => {
-                node.align(Align::Start, align_items, Size::new(0.0, cross));
+                node.align(
+                    CrossAlign::Start,
+                    align_items,
+                    Size::new(0.0, cross),
+                );
             }
             Axis::Vertical => {
-                node.align(align_items, Align::Start, Size::new(cross, 0.0));
+                node.align(
+                    align_items,
+                    CrossAlign::Start,
+                    Size::new(cross, 0.0),
+                );
             }
         }
 
diff --git a/native/src/layout/node.rs b/native/src/layout/node.rs
index bee5e64e..2239a654 100644
--- a/native/src/layout/node.rs
+++ b/native/src/layout/node.rs
@@ -1,4 +1,4 @@
-use crate::{Align, Point, Rectangle, Size};
+use crate::{CrossAlign, Point, Rectangle, Size};
 
 /// The bounds of an element and its children.
 #[derive(Debug, Clone, Default)]
@@ -44,32 +44,32 @@ impl Node {
     /// Aligns the [`Node`] in the given space.
     pub fn align(
         &mut self,
-        horizontal_alignment: Align,
-        vertical_alignment: Align,
+        horizontal_alignment: CrossAlign,
+        vertical_alignment: CrossAlign,
         space: Size,
     ) {
         match horizontal_alignment {
-            Align::Start => {}
-            Align::Center => {
+            CrossAlign::Start => {}
+            CrossAlign::Center => {
                 self.bounds.x += (space.width - self.bounds.width) / 2.0;
             }
-            Align::End => {
+            CrossAlign::End => {
                 self.bounds.x += space.width - self.bounds.width;
             }
-            Align::Fill => {
+            CrossAlign::Fill => {
                 self.bounds.width = space.width;
             }
         }
 
         match vertical_alignment {
-            Align::Start => {}
-            Align::Center => {
+            CrossAlign::Start => {}
+            CrossAlign::Center => {
                 self.bounds.y += (space.height - self.bounds.height) / 2.0;
             }
-            Align::End => {
+            CrossAlign::End => {
                 self.bounds.y += space.height - self.bounds.height;
             }
-            Align::Fill => {
+            CrossAlign::Fill => {
                 self.bounds.height = space.height;
             }
         }
diff --git a/native/src/lib.rs b/native/src/lib.rs
index cb0600e2..cf8b0da5 100644
--- a/native/src/lib.rs
+++ b/native/src/lib.rs
@@ -62,8 +62,8 @@ mod debug;
 mod debug;
 
 pub use iced_core::{
-    Align, Background, Color, Font, HorizontalAlignment, Length, Padding,
-    Point, Rectangle, Size, Vector, VerticalAlignment,
+    Align, Background, Color, CrossAlign, Font, HorizontalAlignment, Length,
+    Padding, Point, Rectangle, Size, Vector, VerticalAlignment,
 };
 pub use iced_futures::{executor, futures};
 
diff --git a/native/src/widget/checkbox.rs b/native/src/widget/checkbox.rs
index 0f21c873..e74515c6 100644
--- a/native/src/widget/checkbox.rs
+++ b/native/src/widget/checkbox.rs
@@ -8,7 +8,7 @@ use crate::row;
 use crate::text;
 use crate::touch;
 use crate::{
-    Align, Clipboard, Color, Element, Hasher, HorizontalAlignment, Layout,
+    Clipboard, Color, CrossAlign, Element, Hasher, HorizontalAlignment, Layout,
     Length, Point, Rectangle, Row, Text, VerticalAlignment, Widget,
 };
 
@@ -138,7 +138,7 @@ where
         Row::<(), Renderer>::new()
             .width(self.width)
             .spacing(self.spacing)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(
                 Row::new()
                     .width(Length::Units(self.size))
diff --git a/native/src/widget/column.rs b/native/src/widget/column.rs
index 52a2e80c..83e5760a 100644
--- a/native/src/widget/column.rs
+++ b/native/src/widget/column.rs
@@ -5,7 +5,7 @@ use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Align, Clipboard, Element, Hasher, Layout, Length, Padding, Point,
+    Clipboard, CrossAlign, Element, Hasher, Layout, Length, Padding, Point,
     Rectangle, Widget,
 };
 
@@ -20,7 +20,7 @@ pub struct Column<'a, Message, Renderer> {
     height: Length,
     max_width: u32,
     max_height: u32,
-    align_items: Align,
+    align_items: CrossAlign,
     children: Vec<Element<'a, Message, Renderer>>,
 }
 
@@ -41,7 +41,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,
-            align_items: Align::Start,
+            align_items: CrossAlign::Start,
             children,
         }
     }
@@ -87,7 +87,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     }
 
     /// Sets the horizontal alignment of the contents of the [`Column`] .
-    pub fn align_items(mut self, align: Align) -> Self {
+    pub fn align_items(mut self, align: CrossAlign) -> Self {
         self.align_items = align;
         self
     }
diff --git a/native/src/widget/container.rs b/native/src/widget/container.rs
index 69aee64d..ae18db25 100644
--- a/native/src/widget/container.rs
+++ b/native/src/widget/container.rs
@@ -5,8 +5,8 @@ use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Align, Clipboard, Element, Hasher, Layout, Length, Padding, Point,
-    Rectangle, Widget,
+    Align, Clipboard, CrossAlign, Element, Hasher, Layout, Length, Padding,
+    Point, Rectangle, Widget,
 };
 
 use std::u32;
@@ -143,7 +143,11 @@ where
             self.padding.left.into(),
             self.padding.top.into(),
         ));
-        content.align(self.horizontal_alignment, self.vertical_alignment, size);
+        content.align(
+            CrossAlign::from(self.horizontal_alignment),
+            CrossAlign::from(self.vertical_alignment),
+            size,
+        );
 
         layout::Node::with_children(size.pad(self.padding), vec![content])
     }
diff --git a/native/src/widget/radio.rs b/native/src/widget/radio.rs
index dee82d1f..1ab51051 100644
--- a/native/src/widget/radio.rs
+++ b/native/src/widget/radio.rs
@@ -8,8 +8,8 @@ use crate::text;
 use crate::touch;
 use crate::{layout, Color};
 use crate::{
-    Align, Clipboard, Element, Hasher, HorizontalAlignment, Layout, Length,
-    Point, Rectangle, Row, Text, VerticalAlignment, Widget,
+    Clipboard, CrossAlign, Element, Hasher, HorizontalAlignment, Layout,
+    Length, Point, Rectangle, Row, Text, VerticalAlignment, Widget,
 };
 
 /// A circular button representing a choice.
@@ -153,7 +153,7 @@ where
         Row::<(), Renderer>::new()
             .width(self.width)
             .spacing(self.spacing)
-            .align_items(Align::Center)
+            .align_items(CrossAlign::Center)
             .push(
                 Row::new()
                     .width(Length::Units(self.size))
diff --git a/native/src/widget/row.rs b/native/src/widget/row.rs
index 9ebc9145..e200e697 100644
--- a/native/src/widget/row.rs
+++ b/native/src/widget/row.rs
@@ -3,7 +3,7 @@ use crate::event::{self, Event};
 use crate::layout;
 use crate::overlay;
 use crate::{
-    Align, Clipboard, Element, Hasher, Layout, Length, Padding, Point,
+    Clipboard, CrossAlign, Element, Hasher, Layout, Length, Padding, Point,
     Rectangle, Widget,
 };
 
@@ -19,7 +19,7 @@ pub struct Row<'a, Message, Renderer> {
     height: Length,
     max_width: u32,
     max_height: u32,
-    align_items: Align,
+    align_items: CrossAlign,
     children: Vec<Element<'a, Message, Renderer>>,
 }
 
@@ -40,7 +40,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
             height: Length::Shrink,
             max_width: u32::MAX,
             max_height: u32::MAX,
-            align_items: Align::Start,
+            align_items: CrossAlign::Start,
             children,
         }
     }
@@ -86,7 +86,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     }
 
     /// Sets the vertical alignment of the contents of the [`Row`] .
-    pub fn align_items(mut self, align: Align) -> Self {
+    pub fn align_items(mut self, align: CrossAlign) -> Self {
         self.align_items = align;
         self
     }
diff --git a/native/src/widget/scrollable.rs b/native/src/widget/scrollable.rs
index 68da2e67..0a2155cc 100644
--- a/native/src/widget/scrollable.rs
+++ b/native/src/widget/scrollable.rs
@@ -6,8 +6,8 @@ use crate::mouse;
 use crate::overlay;
 use crate::touch;
 use crate::{
-    Align, Clipboard, Column, Element, Hasher, Layout, Length, Padding, Point,
-    Rectangle, Size, Vector, Widget,
+    Clipboard, Column, CrossAlign, Element, Hasher, Layout, Length, Padding,
+    Point, Rectangle, Size, Vector, Widget,
 };
 
 use std::{f32, hash::Hash, u32};
@@ -84,7 +84,7 @@ impl<'a, Message, Renderer: self::Renderer> Scrollable<'a, Message, Renderer> {
     }
 
     /// Sets the horizontal alignment of the contents of the [`Scrollable`] .
-    pub fn align_items(mut self, align_items: Align) -> Self {
+    pub fn align_items(mut self, align_items: CrossAlign) -> Self {
         self.content = self.content.align_items(align_items);
         self
     }
diff --git a/native/src/widget/toggler.rs b/native/src/widget/toggler.rs
index 4035276c..34dc52a0 100644
--- a/native/src/widget/toggler.rs
+++ b/native/src/widget/toggler.rs
@@ -2,8 +2,8 @@
 use std::hash::Hash;
 
 use crate::{
-    event, layout, mouse, row, text, Align, Clipboard, Element, Event, Hasher,
-    HorizontalAlignment, Layout, Length, Point, Rectangle, Row, Text,
+    event, layout, mouse, row, text, Clipboard, CrossAlign, Element, Event,
+    Hasher, HorizontalAlignment, Layout, Length, Point, Rectangle, Row, Text,
     VerticalAlignment, Widget,
 };
 
@@ -132,7 +132,7 @@ where
         let mut row = Row::<(), Renderer>::new()
             .width(self.width)
             .spacing(self.spacing)
-            .align_items(Align::Center);
+            .align_items(CrossAlign::Center);
 
         if let Some(label) = &self.label {
             row = row.push(
diff --git a/src/lib.rs b/src/lib.rs
index 3d4b96f1..5ef25d2e 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -246,6 +246,7 @@ pub use sandbox::Sandbox;
 pub use settings::Settings;
 
 pub use runtime::{
-    futures, Align, Background, Color, Command, Font, HorizontalAlignment,
-    Length, Point, Rectangle, Size, Subscription, Vector, VerticalAlignment,
+    futures, Align, Background, Color, Command, CrossAlign, Font,
+    HorizontalAlignment, Length, Point, Rectangle, Size, Subscription, Vector,
+    VerticalAlignment,
 };
diff --git a/web/src/css.rs b/web/src/css.rs
index 23b21e22..c132d045 100644
--- a/web/src/css.rs
+++ b/web/src/css.rs
@@ -1,5 +1,5 @@
 //! Style your widgets.
-use crate::{bumpalo, Align, Background, Color, Length, Padding};
+use crate::{bumpalo, Align, Background, Color, CrossAlign, Length, Padding};
 
 use std::collections::BTreeMap;
 
@@ -201,7 +201,16 @@ pub fn align(align: Align) -> &'static str {
         Align::Start => "flex-start",
         Align::Center => "center",
         Align::End => "flex-end",
-        Align::Fill => "stretch",
+    }
+}
+
+/// Returns the style value for the given [`CrossAlign`].
+pub fn cross_align(align: CrossAlign) -> &'static str {
+    match align {
+        CrossAlign::Start => "flex-start",
+        CrossAlign::Center => "center",
+        CrossAlign::End => "flex-end",
+        CrossAlign::Fill => "stretch",
     }
 }
 
diff --git a/web/src/lib.rs b/web/src/lib.rs
index 8cfe685b..b968c96f 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -74,8 +74,9 @@ pub use dodrio;
 pub use element::Element;
 pub use hasher::Hasher;
 pub use iced_core::{
-    keyboard, mouse, Align, Background, Color, Font, HorizontalAlignment,
-    Length, Padding, Point, Rectangle, Size, Vector, VerticalAlignment,
+    keyboard, mouse, Align, Background, Color, CrossAlign, Font,
+    HorizontalAlignment, Length, Padding, Point, Rectangle, Size, Vector,
+    VerticalAlignment,
 };
 pub use iced_futures::{executor, futures};
 pub use subscription::Subscription;