Merge pull request #2504 from iced-rs/view-ergonomics

Improved `view` ergonomics

core/src/alignment.rs

@@ -46,6 +46,16 @@ pub enum Horizontal {
     Right,
 }
 
+impl From<Alignment> for Horizontal {
+    fn from(alignment: Alignment) -> Self {
+        match alignment {
+            Alignment::Start => Self::Left,
+            Alignment::Center => Self::Center,
+            Alignment::End => Self::Right,
+        }
+    }
+}
+
 /// The vertical [`Alignment`] of some resource.
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
 pub enum Vertical {
@@ -58,3 +68,13 @@ pub enum Vertical {
     /// Align bottom
     Bottom,
 }
+
+impl From<Alignment> for Vertical {
+    fn from(alignment: Alignment) -> Self {
+        match alignment {
+            Alignment::Start => Self::Top,
+            Alignment::Center => Self::Center,
+            Alignment::End => Self::Bottom,
+        }
+    }
+}

core/src/border.rs

@@ -10,40 +10,64 @@ pub struct Border {
     /// The width of the border.
     pub width: f32,
 
-    /// The radius of the border.
+    /// The [`Radius`] of the border.
     pub radius: Radius,
 }
 
-impl Border {
-    /// Creates a new default rounded [`Border`] with the given [`Radius`].
-    ///
-    /// ```
-    /// # use iced_core::Border;
-    /// #
-    /// assert_eq!(Border::rounded(10), Border::default().with_radius(10));
-    /// ```
-    pub fn rounded(radius: impl Into<Radius>) -> Self {
-        Self::default().with_radius(radius)
-    }
+/// Creates a new [`Border`] with the given [`Radius`].
+///
+/// ```
+/// # use iced_core::border::{self, Border};
+/// #
+/// assert_eq!(border::rounded(10), Border::default().rounded(10));
+/// ```
+pub fn rounded(radius: impl Into<Radius>) -> Border {
+    Border::default().rounded(radius)
+}
 
-    /// Updates the [`Color`] of the [`Border`].
-    pub fn with_color(self, color: impl Into<Color>) -> Self {
+/// Creates a new [`Border`] with the given [`Color`].
+///
+/// ```
+/// # use iced_core::border::{self, Border};
+/// # use iced_core::Color;
+/// #
+/// assert_eq!(border::color(Color::BLACK), Border::default().color(Color::BLACK));
+/// ```
+pub fn color(color: impl Into<Color>) -> Border {
+    Border::default().color(color)
+}
+
+/// Creates a new [`Border`] with the given `width`.
+///
+/// ```
+/// # use iced_core::border::{self, Border};
+/// # use iced_core::Color;
+/// #
+/// assert_eq!(border::width(10), Border::default().width(10));
+/// ```
+pub fn width(width: impl Into<Pixels>) -> Border {
+    Border::default().width(width)
+}
+
+impl Border {
+    /// Sets the [`Color`] of the [`Border`].
+    pub fn color(self, color: impl Into<Color>) -> Self {
         Self {
             color: color.into(),
             ..self
         }
     }
 
-    /// Updates the [`Radius`] of the [`Border`].
-    pub fn with_radius(self, radius: impl Into<Radius>) -> Self {
+    /// Sets the [`Radius`] of the [`Border`].
+    pub fn rounded(self, radius: impl Into<Radius>) -> Self {
         Self {
             radius: radius.into(),
             ..self
         }
     }
 
-    /// Updates the width of the [`Border`].
-    pub fn with_width(self, width: impl Into<Pixels>) -> Self {
+    /// Sets the width of the [`Border`].
+    pub fn width(self, width: impl Into<Pixels>) -> Self {
         Self {
             width: width.into().0,
             ..self
@@ -54,11 +78,160 @@ impl Border {
 /// The border radii for the corners of a graphics primitive in the order:
 /// top-left, top-right, bottom-right, bottom-left.
 #[derive(Debug, Clone, Copy, PartialEq, Default)]
-pub struct Radius([f32; 4]);
+pub struct Radius {
+    /// Top left radius
+    pub top_left: f32,
+    /// Top right radius
+    pub top_right: f32,
+    /// Bottom right radius
+    pub bottom_right: f32,
+    /// Bottom left radius
+    pub bottom_left: f32,
+}
+
+/// Creates a new [`Radius`] with the same value for each corner.
+pub fn radius(value: impl Into<Pixels>) -> Radius {
+    Radius::new(value)
+}
+
+/// Creates a new [`Radius`] with the given top left value.
+pub fn top_left(value: impl Into<Pixels>) -> Radius {
+    Radius::default().top_left(value)
+}
+
+/// Creates a new [`Radius`] with the given top right value.
+pub fn top_right(value: impl Into<Pixels>) -> Radius {
+    Radius::default().top_right(value)
+}
+
+/// Creates a new [`Radius`] with the given bottom right value.
+pub fn bottom_right(value: impl Into<Pixels>) -> Radius {
+    Radius::default().bottom_right(value)
+}
+
+/// Creates a new [`Radius`] with the given bottom left value.
+pub fn bottom_left(value: impl Into<Pixels>) -> Radius {
+    Radius::default().bottom_left(value)
+}
+
+/// Creates a new [`Radius`] with the given value as top left and top right.
+pub fn top(value: impl Into<Pixels>) -> Radius {
+    Radius::default().top(value)
+}
+
+/// Creates a new [`Radius`] with the given value as bottom left and bottom right.
+pub fn bottom(value: impl Into<Pixels>) -> Radius {
+    Radius::default().bottom(value)
+}
+
+/// Creates a new [`Radius`] with the given value as top left and bottom left.
+pub fn left(value: impl Into<Pixels>) -> Radius {
+    Radius::default().left(value)
+}
+
+/// Creates a new [`Radius`] with the given value as top right and bottom right.
+pub fn right(value: impl Into<Pixels>) -> Radius {
+    Radius::default().right(value)
+}
+
+impl Radius {
+    /// Creates a new [`Radius`] with the same value for each corner.
+    pub fn new(value: impl Into<Pixels>) -> Self {
+        let value = value.into().0;
+
+        Self {
+            top_left: value,
+            top_right: value,
+            bottom_right: value,
+            bottom_left: value,
+        }
+    }
+
+    /// Sets the top left value of the [`Radius`].
+    pub fn top_left(self, value: impl Into<Pixels>) -> Self {
+        Self {
+            top_left: value.into().0,
+            ..self
+        }
+    }
+
+    /// Sets the top right value of the [`Radius`].
+    pub fn top_right(self, value: impl Into<Pixels>) -> Self {
+        Self {
+            top_right: value.into().0,
+            ..self
+        }
+    }
+
+    /// Sets the bottom right value of the [`Radius`].
+    pub fn bottom_right(self, value: impl Into<Pixels>) -> Self {
+        Self {
+            bottom_right: value.into().0,
+            ..self
+        }
+    }
+
+    /// Sets the bottom left value of the [`Radius`].
+    pub fn bottom_left(self, value: impl Into<Pixels>) -> Self {
+        Self {
+            bottom_left: value.into().0,
+            ..self
+        }
+    }
+
+    /// Sets the top left and top right values of the [`Radius`].
+    pub fn top(self, value: impl Into<Pixels>) -> Self {
+        let value = value.into().0;
+
+        Self {
+            top_left: value,
+            top_right: value,
+            ..self
+        }
+    }
+
+    /// Sets the bottom left and bottom right values of the [`Radius`].
+    pub fn bottom(self, value: impl Into<Pixels>) -> Self {
+        let value = value.into().0;
+
+        Self {
+            bottom_left: value,
+            bottom_right: value,
+            ..self
+        }
+    }
+
+    /// Sets the top left and bottom left values of the [`Radius`].
+    pub fn left(self, value: impl Into<Pixels>) -> Self {
+        let value = value.into().0;
+
+        Self {
+            top_left: value,
+            bottom_left: value,
+            ..self
+        }
+    }
+
+    /// Sets the top right and bottom right values of the [`Radius`].
+    pub fn right(self, value: impl Into<Pixels>) -> Self {
+        let value = value.into().0;
+
+        Self {
+            top_right: value,
+            bottom_right: value,
+            ..self
+        }
+    }
+}
 
 impl From<f32> for Radius {
-    fn from(w: f32) -> Self {
-        Self([w; 4])
+    fn from(radius: f32) -> Self {
+        Self {
+            top_left: radius,
+            top_right: radius,
+            bottom_right: radius,
+            bottom_left: radius,
+        }
     }
 }
 
@@ -80,14 +253,13 @@ impl From<i32> for Radius {
     }
 }
 
-impl From<[f32; 4]> for Radius {
-    fn from(radi: [f32; 4]) -> Self {
-        Self(radi)
-    }
-}
-
 impl From<Radius> for [f32; 4] {
     fn from(radi: Radius) -> Self {
-        radi.0
+        [
+            radi.top_left,
+            radi.top_right,
+            radi.bottom_right,
+            radi.bottom_left,
+        ]
     }
 }

core/src/border_radius.rs

@@ -1,22 +0,0 @@
-/// The border radii for the corners of a graphics primitive in the order:
-/// top-left, top-right, bottom-right, bottom-left.
-#[derive(Debug, Clone, Copy, PartialEq, Default)]
-pub struct BorderRadius([f32; 4]);
-
-impl From<f32> for BorderRadius {
-    fn from(w: f32) -> Self {
-        Self([w; 4])
-    }
-}
-
-impl From<[f32; 4]> for BorderRadius {
-    fn from(radi: [f32; 4]) -> Self {
-        Self(radi)
-    }
-}
-
-impl From<BorderRadius> for [f32; 4] {
-    fn from(radi: BorderRadius) -> Self {
-        radi.0
-    }
-}

core/src/lib.rs

@@ -20,6 +20,7 @@ pub mod keyboard;
 pub mod layout;
 pub mod mouse;
 pub mod overlay;
+pub mod padding;
 pub mod renderer;
 pub mod svg;
 pub mod text;
@@ -35,7 +36,6 @@ mod color;
 mod content_fit;
 mod element;
 mod length;
-mod padding;
 mod pixels;
 mod point;
 mod rectangle;

core/src/padding.rs

@@ -1,3 +1,4 @@
+//! Space stuff around the perimeter.
 use crate::{Pixels, Size};
 
 /// An amount of space to pad for each side of a box
@@ -9,7 +10,6 @@ use crate::{Pixels, Size};
 /// #
 /// let padding = Padding::from(20);              // 20px on all sides
 /// let padding = Padding::from([10, 20]);        // top/bottom, left/right
-/// let padding = Padding::from([5, 10, 15, 20]); // top, right, bottom, left
 /// ```
 ///
 /// Normally, the `padding` method of a widget will ask for an `Into<Padding>`,
@@ -31,9 +31,8 @@ use crate::{Pixels, Size};
 ///
 /// let widget = Widget::new().padding(20);              // 20px on all sides
 /// let widget = Widget::new().padding([10, 20]);        // top/bottom, left/right
-/// let widget = Widget::new().padding([5, 10, 15, 20]); // top, right, bottom, left
 /// ```
-#[derive(Debug, Copy, Clone)]
+#[derive(Debug, Copy, Clone, Default)]
 pub struct Padding {
     /// Top padding
     pub top: f32,
@@ -45,6 +44,31 @@ pub struct Padding {
     pub left: f32,
 }
 
+/// Create a [`Padding`] that is equal on all sides.
+pub fn all(padding: impl Into<Pixels>) -> Padding {
+    Padding::new(padding.into().0)
+}
+
+/// Create some top [`Padding`].
+pub fn top(padding: impl Into<Pixels>) -> Padding {
+    Padding::default().top(padding)
+}
+
+/// Create some bottom [`Padding`].
+pub fn bottom(padding: impl Into<Pixels>) -> Padding {
+    Padding::default().bottom(padding)
+}
+
+/// Create some left [`Padding`].
+pub fn left(padding: impl Into<Pixels>) -> Padding {
+    Padding::default().left(padding)
+}
+
+/// Create some right [`Padding`].
+pub fn right(padding: impl Into<Pixels>) -> Padding {
+    Padding::default().right(padding)
+}
+
 impl Padding {
     /// Padding of zero
     pub const ZERO: Padding = Padding {
@@ -64,35 +88,43 @@ impl Padding {
         }
     }
 
-    /// Create some top [`Padding`].
-    pub fn top(padding: impl Into<Pixels>) -> Self {
+    /// Sets the [`top`] of the [`Padding`].
+    ///
+    /// [`top`]: Self::top
+    pub fn top(self, top: impl Into<Pixels>) -> Self {
         Self {
-            top: padding.into().0,
-            ..Self::ZERO
+            top: top.into().0,
+            ..self
         }
     }
 
-    /// Create some right [`Padding`].
-    pub fn right(padding: impl Into<Pixels>) -> Self {
+    /// Sets the [`bottom`] of the [`Padding`].
+    ///
+    /// [`bottom`]: Self::bottom
+    pub fn bottom(self, bottom: impl Into<Pixels>) -> Self {
         Self {
-            right: padding.into().0,
-            ..Self::ZERO
+            bottom: bottom.into().0,
+            ..self
         }
     }
 
-    /// Create some bottom [`Padding`].
-    pub fn bottom(padding: impl Into<Pixels>) -> Self {
+    /// Sets the [`left`] of the [`Padding`].
+    ///
+    /// [`left`]: Self::left
+    pub fn left(self, left: impl Into<Pixels>) -> Self {
         Self {
-            bottom: padding.into().0,
-            ..Self::ZERO
+            left: left.into().0,
+            ..self
         }
     }
 
-    /// Create some left [`Padding`].
-    pub fn left(padding: impl Into<Pixels>) -> Self {
+    /// Sets the [`right`] of the [`Padding`].
+    ///
+    /// [`right`]: Self::right
+    pub fn right(self, right: impl Into<Pixels>) -> Self {
         Self {
-            left: padding.into().0,
-            ..Self::ZERO
+            right: right.into().0,
+            ..self
         }
     }
 
@@ -143,17 +175,6 @@ impl From<[u16; 2]> for Padding {
     }
 }
 
-impl From<[u16; 4]> for Padding {
-    fn from(p: [u16; 4]) -> Self {
-        Padding {
-            top: f32::from(p[0]),
-            right: f32::from(p[1]),
-            bottom: f32::from(p[2]),
-            left: f32::from(p[3]),
-        }
-    }
-}
-
 impl From<f32> for Padding {
     fn from(p: f32) -> Self {
         Padding {
@@ -176,17 +197,6 @@ impl From<[f32; 2]> for Padding {
     }
 }
 
-impl From<[f32; 4]> for Padding {
-    fn from(p: [f32; 4]) -> Self {
-        Padding {
-            top: p[0],
-            right: p[1],
-            bottom: p[2],
-            left: p[3],
-        }
-    }
-}
-
 impl From<Padding> for Size {
     fn from(padding: Padding) -> Self {
         Self::new(padding.horizontal(), padding.vertical())

core/src/pixels.rs

@@ -6,7 +6,7 @@
 /// (e.g. `impl Into<Pixels>`) and, since `Pixels` implements `From` both for
 /// `f32` and `u16`, you should be able to provide both integers and float
 /// literals as needed.
-#[derive(Debug, Clone, Copy, PartialEq, PartialOrd)]
+#[derive(Debug, Clone, Copy, PartialEq, PartialOrd, Default)]
 pub struct Pixels(pub f32);
 
 impl From<f32> for Pixels {
@@ -27,6 +27,30 @@ impl From<Pixels> for f32 {
     }
 }
 
+impl std::ops::Add for Pixels {
+    type Output = Pixels;
+
+    fn add(self, rhs: Self) -> Self {
+        Pixels(self.0 + rhs.0)
+    }
+}
+
+impl std::ops::Add<f32> for Pixels {
+    type Output = Pixels;
+
+    fn add(self, rhs: f32) -> Self {
+        Pixels(self.0 + rhs)
+    }
+}
+
+impl std::ops::Mul for Pixels {
+    type Output = Pixels;
+
+    fn mul(self, rhs: Self) -> Self {
+        Pixels(self.0 * rhs.0)
+    }
+}
+
 impl std::ops::Mul<f32> for Pixels {
     type Output = Pixels;
 

core/src/widget/text.rs

@@ -86,21 +86,27 @@ where
         self
     }
 
+    /// Centers the [`Text`], both horizontally and vertically.
+    pub fn center(self) -> Self {
+        self.align_x(alignment::Horizontal::Center)
+            .align_y(alignment::Vertical::Center)
+    }
+
     /// Sets the [`alignment::Horizontal`] of the [`Text`].
-    pub fn horizontal_alignment(
+    pub fn align_x(
         mut self,
-        alignment: alignment::Horizontal,
+        alignment: impl Into<alignment::Horizontal>,
     ) -> Self {
-        self.horizontal_alignment = alignment;
+        self.horizontal_alignment = alignment.into();
         self
     }
 
     /// Sets the [`alignment::Vertical`] of the [`Text`].
-    pub fn vertical_alignment(
+    pub fn align_y(
         mut self,
-        alignment: alignment::Vertical,
+        alignment: impl Into<alignment::Vertical>,
     ) -> Self {
-        self.vertical_alignment = alignment;
+        self.vertical_alignment = alignment.into();
         self
     }
 

examples/arc/src/main.rs

@@ -4,7 +4,7 @@ use iced::mouse;
 use iced::widget::canvas::{
     self, stroke, Cache, Canvas, Geometry, Path, Stroke,
 };
-use iced::{Element, Length, Point, Rectangle, Renderer, Subscription, Theme};
+use iced::{Element, Fill, Point, Rectangle, Renderer, Subscription, Theme};
 
 pub fn main() -> iced::Result {
     iced::application("Arc - Iced", Arc::update, Arc::view)
@@ -30,10 +30,7 @@ impl Arc {
     }
 
     fn view(&self) -> Element<Message> {
-        Canvas::new(self)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .into()
+        Canvas::new(self).width(Fill).height(Fill).into()
     }
 
     fn subscription(&self) -> Subscription<Message> {

examples/bezier_tool/src/main.rs

@@ -1,7 +1,6 @@
 //! This example showcases an interactive `Canvas` for drawing Bézier curves.
-use iced::alignment;
 use iced::widget::{button, container, horizontal_space, hover};
-use iced::{Element, Length, Theme};
+use iced::{Element, Fill, Theme};
 
 pub fn main() -> iced::Result {
     iced::application("Bezier Tool - Iced", Example::update, Example::view)
@@ -48,8 +47,7 @@ impl Example {
                         .on_press(Message::Clear),
                 )
                 .padding(10)
-                .width(Length::Fill)
-                .align_x(alignment::Horizontal::Right)
+                .align_right(Fill)
             },
         ))
         .padding(20)
@@ -61,7 +59,7 @@ mod bezier {
     use iced::mouse;
     use iced::widget::canvas::event::{self, Event};
     use iced::widget::canvas::{self, Canvas, Frame, Geometry, Path, Stroke};
-    use iced::{Element, Length, Point, Rectangle, Renderer, Theme};
+    use iced::{Element, Fill, Point, Rectangle, Renderer, Theme};
 
     #[derive(Default)]
     pub struct State {
@@ -74,8 +72,8 @@ mod bezier {
                 state: self,
                 curves,
             })
-            .width(Length::Fill)
-            .height(Length::Fill)
+            .width(Fill)
+            .height(Fill)
             .into()
         }
 

examples/clock/src/main.rs

@@ -4,7 +4,7 @@ use iced::time;
 use iced::widget::canvas::{stroke, Cache, Geometry, LineCap, Path, Stroke};
 use iced::widget::{canvas, container};
 use iced::{
-    Degrees, Element, Font, Length, Point, Rectangle, Renderer, Subscription,
+    Degrees, Element, Fill, Font, Point, Rectangle, Renderer, Subscription,
     Theme, Vector,
 };
 
@@ -43,15 +43,9 @@ impl Clock {
     }
 
     fn view(&self) -> Element<Message> {
-        let canvas = canvas(self as &Self)
-            .width(Length::Fill)
-            .height(Length::Fill);
+        let canvas = canvas(self as &Self).width(Fill).height(Fill);
 
-        container(canvas)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .padding(20)
-            .into()
+        container(canvas).padding(20).into()
     }
 
     fn subscription(&self) -> Subscription<Message> {

examples/color_palette/src/main.rs

@@ -1,10 +1,10 @@
-use iced::alignment::{self, Alignment};
+use iced::alignment;
 use iced::mouse;
 use iced::widget::canvas::{self, Canvas, Frame, Geometry, Path};
 use iced::widget::{column, row, text, Slider};
 use iced::{
-    Color, Element, Font, Length, Pixels, Point, Rectangle, Renderer, Size,
-    Vector,
+    Center, Color, Element, Fill, Font, Pixels, Point, Rectangle, Renderer,
+    Size, Vector,
 };
 use palette::{convert::FromColor, rgb::Rgb, Darken, Hsl, Lighten, ShiftHue};
 use std::marker::PhantomData;
@@ -150,10 +150,7 @@ impl Theme {
     }
 
     pub fn view(&self) -> Element<Message> {
-        Canvas::new(self)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .into()
+        Canvas::new(self).width(Fill).height(Fill).into()
     }
 
     fn draw(&self, frame: &mut Frame, text_color: Color) {
@@ -320,7 +317,7 @@ impl<C: ColorSpace + Copy> ColorPicker<C> {
             text(color.to_string()).width(185).size(12),
         ]
         .spacing(10)
-        .align_items(Alignment::Center)
+        .align_y(Center)
         .into()
     }
 }

examples/combo_box/src/main.rs

@@ -1,7 +1,7 @@
 use iced::widget::{
     center, column, combo_box, scrollable, text, vertical_space,
 };
-use iced::{Alignment, Element, Length};
+use iced::{Center, Element, Fill};
 
 pub fn main() -> iced::Result {
     iced::run("Combo Box - Iced", Example::update, Example::view)
@@ -64,8 +64,8 @@ impl Example {
             combo_box,
             vertical_space().height(150),
         ]
-        .width(Length::Fill)
-        .align_items(Alignment::Center)
+        .width(Fill)
+        .align_x(Center)
         .spacing(10);
 
         center(scrollable(content)).into()

examples/component/src/main.rs

@@ -34,9 +34,8 @@ impl Component {
 }
 
 mod numeric_input {
-    use iced::alignment::{self, Alignment};
     use iced::widget::{button, component, row, text, text_input, Component};
-    use iced::{Element, Length, Size};
+    use iced::{Center, Element, Fill, Length, Size};
 
     pub struct NumericInput<Message> {
         value: Option<u32>,
@@ -104,16 +103,10 @@ mod numeric_input {
 
         fn view(&self, _state: &Self::State) -> Element<'_, Event, Theme> {
             let button = |label, on_press| {
-                button(
-                    text(label)
-                        .width(Length::Fill)
-                        .height(Length::Fill)
-                        .horizontal_alignment(alignment::Horizontal::Center)
-                        .vertical_alignment(alignment::Vertical::Center),
-                )
-                .width(40)
-                .height(40)
-                .on_press(on_press)
+                button(text(label).width(Fill).height(Fill).center())
+                    .width(40)
+                    .height(40)
+                    .on_press(on_press)
             };
 
             row![
@@ -130,7 +123,7 @@ mod numeric_input {
                 .padding(10),
                 button("+", Event::IncrementPressed),
             ]
-            .align_items(Alignment::Center)
+            .align_y(Center)
             .spacing(10)
             .into()
         }

examples/counter/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{button, column, text, Column};
-use iced::Alignment;
+use iced::Center;
 
 pub fn main() -> iced::Result {
     iced::run("A cool counter", Counter::update, Counter::view)
@@ -35,6 +35,6 @@ impl Counter {
             button("Decrement").on_press(Message::Decrement)
         ]
         .padding(20)
-        .align_items(Alignment::Center)
+        .align_x(Center)
     }
 }

examples/custom_quad/src/main.rs

@@ -3,12 +3,13 @@ mod quad {
     use iced::advanced::layout::{self, Layout};
     use iced::advanced::renderer;
     use iced::advanced::widget::{self, Widget};
+    use iced::border;
     use iced::mouse;
     use iced::{Border, Color, Element, Length, Rectangle, Shadow, Size};
 
     pub struct CustomQuad {
         size: f32,
-        radius: [f32; 4],
+        radius: border::Radius,
         border_width: f32,
         shadow: Shadow,
     }
@@ -16,7 +17,7 @@ mod quad {
     impl CustomQuad {
         pub fn new(
             size: f32,
-            radius: [f32; 4],
+            radius: border::Radius,
             border_width: f32,
             shadow: Shadow,
         ) -> Self {
@@ -63,7 +64,7 @@ mod quad {
                 renderer::Quad {
                     bounds: layout.bounds(),
                     border: Border {
-                        radius: self.radius.into(),
+                        radius: self.radius,
                         width: self.border_width,
                         color: Color::from_rgb(1.0, 0.0, 0.0),
                     },
@@ -81,15 +82,16 @@ mod quad {
     }
 }
 
+use iced::border;
 use iced::widget::{center, column, slider, text};
-use iced::{Alignment, Color, Element, Shadow, Vector};
+use iced::{Center, Color, Element, Shadow, Vector};
 
 pub fn main() -> iced::Result {
     iced::run("Custom Quad - Iced", Example::update, Example::view)
 }
 
 struct Example {
-    radius: [f32; 4],
+    radius: border::Radius,
     border_width: f32,
     shadow: Shadow,
 }
@@ -110,7 +112,7 @@ enum Message {
 impl Example {
     fn new() -> Self {
         Self {
-            radius: [50.0; 4],
+            radius: border::radius(50),
             border_width: 0.0,
             shadow: Shadow {
                 color: Color::from_rgba(0.0, 0.0, 0.0, 0.8),
@@ -121,19 +123,18 @@ impl Example {
     }
 
     fn update(&mut self, message: Message) {
-        let [tl, tr, br, bl] = self.radius;
         match message {
             Message::RadiusTopLeftChanged(radius) => {
-                self.radius = [radius, tr, br, bl];
+                self.radius = self.radius.top_left(radius);
             }
             Message::RadiusTopRightChanged(radius) => {
-                self.radius = [tl, radius, br, bl];
+                self.radius = self.radius.top_right(radius);
             }
             Message::RadiusBottomRightChanged(radius) => {
-                self.radius = [tl, tr, radius, bl];
+                self.radius = self.radius.bottom_right(radius);
             }
             Message::RadiusBottomLeftChanged(radius) => {
-                self.radius = [tl, tr, br, radius];
+                self.radius = self.radius.bottom_left(radius);
             }
             Message::BorderWidthChanged(width) => {
                 self.border_width = width;
@@ -151,7 +152,13 @@ impl Example {
     }
 
     fn view(&self) -> Element<Message> {
-        let [tl, tr, br, bl] = self.radius;
+        let border::Radius {
+            top_left,
+            top_right,
+            bottom_right,
+            bottom_left,
+        } = self.radius;
+
         let Shadow {
             offset: Vector { x: sx, y: sy },
             blur_radius: sr,
@@ -165,12 +172,12 @@ impl Example {
                 self.border_width,
                 self.shadow
             ),
-            text!("Radius: {tl:.2}/{tr:.2}/{br:.2}/{bl:.2}"),
-            slider(1.0..=100.0, tl, Message::RadiusTopLeftChanged).step(0.01),
-            slider(1.0..=100.0, tr, Message::RadiusTopRightChanged).step(0.01),
-            slider(1.0..=100.0, br, Message::RadiusBottomRightChanged)
+            text!("Radius: {top_left:.2}/{top_right:.2}/{bottom_right:.2}/{bottom_left:.2}"),
+            slider(1.0..=100.0, top_left, Message::RadiusTopLeftChanged).step(0.01),
+            slider(1.0..=100.0, top_right, Message::RadiusTopRightChanged).step(0.01),
+            slider(1.0..=100.0, bottom_right, Message::RadiusBottomRightChanged)
                 .step(0.01),
-            slider(1.0..=100.0, bl, Message::RadiusBottomLeftChanged)
+            slider(1.0..=100.0, bottom_left, Message::RadiusBottomLeftChanged)
                 .step(0.01),
             slider(1.0..=10.0, self.border_width, Message::BorderWidthChanged)
                 .step(0.01),
@@ -185,7 +192,7 @@ impl Example {
         .padding(20)
         .spacing(20)
         .max_width(500)
-        .align_items(Alignment::Center);
+        .align_x(Center);
 
         center(content).into()
     }

examples/custom_shader/src/main.rs

@@ -6,7 +6,7 @@ use iced::time::Instant;
 use iced::widget::shader::wgpu;
 use iced::widget::{center, checkbox, column, row, shader, slider, text};
 use iced::window;
-use iced::{Alignment, Color, Element, Length, Subscription};
+use iced::{Center, Color, Element, Fill, Subscription};
 
 fn main() -> iced::Result {
     iced::application(
@@ -122,12 +122,11 @@ impl IcedCubes {
         let controls = column![top_controls, bottom_controls,]
             .spacing(10)
             .padding(20)
-            .align_items(Alignment::Center);
+            .align_x(Center);
 
-        let shader =
-            shader(&self.scene).width(Length::Fill).height(Length::Fill);
+        let shader = shader(&self.scene).width(Fill).height(Fill);
 
-        center(column![shader, controls].align_items(Alignment::Center)).into()
+        center(column![shader, controls].align_x(Center)).into()
     }
 
     fn subscription(&self) -> Subscription<Message> {

examples/custom_widget/src/main.rs

@@ -12,8 +12,9 @@ mod circle {
     use iced::advanced::layout::{self, Layout};
     use iced::advanced::renderer;
     use iced::advanced::widget::{self, Widget};
+    use iced::border;
     use iced::mouse;
-    use iced::{Border, Color, Element, Length, Rectangle, Size};
+    use iced::{Color, Element, Length, Rectangle, Size};
 
     pub struct Circle {
         radius: f32,
@@ -62,7 +63,7 @@ mod circle {
             renderer.fill_quad(
                 renderer::Quad {
                     bounds: layout.bounds(),
-                    border: Border::rounded(self.radius),
+                    border: border::rounded(self.radius),
                     ..renderer::Quad::default()
                 },
                 Color::BLACK,
@@ -83,7 +84,7 @@ mod circle {
 
 use circle::circle;
 use iced::widget::{center, column, slider, text};
-use iced::{Alignment, Element};
+use iced::{Center, Element};
 
 pub fn main() -> iced::Result {
     iced::run("Custom Widget - Iced", Example::update, Example::view)
@@ -120,7 +121,7 @@ impl Example {
         .padding(20)
         .spacing(20)
         .max_width(500)
-        .align_items(Alignment::Center);
+        .align_x(Center);
 
         center(content).into()
     }

examples/download_progress/src/main.rs

@@ -1,7 +1,7 @@
 mod download;
 
 use iced::widget::{button, center, column, progress_bar, text, Column};
-use iced::{Alignment, Element, Subscription};
+use iced::{Center, Element, Right, Subscription};
 
 pub fn main() -> iced::Result {
     iced::application(
@@ -69,7 +69,7 @@ impl Example {
                         .padding(10),
                 )
                 .spacing(20)
-                .align_items(Alignment::End);
+                .align_x(Right);
 
         center(downloads).padding(20).into()
     }
@@ -160,7 +160,7 @@ impl Download {
             State::Finished => {
                 column!["Download finished!", button("Start again")]
                     .spacing(10)
-                    .align_items(Alignment::Center)
+                    .align_x(Center)
                     .into()
             }
             State::Downloading { .. } => {
@@ -171,14 +171,14 @@ impl Download {
                 button("Try again").on_press(Message::Download(self.id)),
             ]
             .spacing(10)
-            .align_items(Alignment::Center)
+            .align_x(Center)
             .into(),
         };
 
         Column::new()
             .spacing(10)
             .padding(10)
-            .align_items(Alignment::Center)
+            .align_x(Center)
             .push(progress_bar)
             .push(control)
             .into()

examples/editor/src/main.rs

@@ -4,7 +4,7 @@ use iced::widget::{
     button, column, container, horizontal_space, pick_list, row, text,
     text_editor, tooltip,
 };
-use iced::{Alignment, Element, Font, Length, Subscription, Task, Theme};
+use iced::{Center, Element, Fill, Font, Subscription, Task, Theme};
 
 use std::ffi;
 use std::io;
@@ -158,7 +158,7 @@ impl Editor {
             .padding([5, 10])
         ]
         .spacing(10)
-        .align_items(Alignment::Center);
+        .align_y(Center);
 
         let status = row![
             text(if let Some(path) = &self.file {
@@ -184,7 +184,7 @@ impl Editor {
         column![
             controls,
             text_editor(&self.content)
-                .height(Length::Fill)
+                .height(Fill)
                 .on_action(Message::ActionPerformed)
                 .highlight::<Highlighter>(
                     highlighter::Settings {

examples/events/src/main.rs

@@ -1,8 +1,7 @@
-use iced::alignment;
 use iced::event::{self, Event};
 use iced::widget::{button, center, checkbox, text, Column};
 use iced::window;
-use iced::{Alignment, Element, Length, Subscription, Task};
+use iced::{Center, Element, Fill, Subscription, Task};
 
 pub fn main() -> iced::Result {
     iced::application("Events - Iced", Events::update, Events::view)
@@ -67,17 +66,13 @@ impl Events {
         let toggle = checkbox("Listen to runtime events", self.enabled)
             .on_toggle(Message::Toggled);
 
-        let exit = button(
-            text("Exit")
-                .width(Length::Fill)
-                .horizontal_alignment(alignment::Horizontal::Center),
-        )
-        .width(100)
-        .padding(10)
-        .on_press(Message::Exit);
+        let exit = button(text("Exit").width(Fill).align_x(Center))
+            .width(100)
+            .padding(10)
+            .on_press(Message::Exit);
 
         let content = Column::new()
-            .align_items(Alignment::Center)
+            .align_x(Center)
             .spacing(20)
             .push(events)
             .push(toggle)

examples/exit/src/main.rs

@@ -1,6 +1,6 @@
 use iced::widget::{button, center, column};
 use iced::window;
-use iced::{Alignment, Element, Task};
+use iced::{Center, Element, Task};
 
 pub fn main() -> iced::Result {
     iced::application("Exit - Iced", Exit::update, Exit::view).run()
@@ -44,7 +44,7 @@ impl Exit {
             ]
         }
         .spacing(10)
-        .align_items(Alignment::Center);
+        .align_x(Center);
 
         center(content).padding(20).into()
     }

examples/ferris/src/main.rs

@@ -4,8 +4,8 @@ use iced::widget::{
 };
 use iced::window;
 use iced::{
-    Alignment, Color, ContentFit, Degrees, Element, Length, Radians, Rotation,
-    Subscription, Theme,
+    Bottom, Center, Color, ContentFit, Degrees, Element, Fill, Radians,
+    Rotation, Subscription, Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -108,7 +108,7 @@ impl Image {
             "I am Ferris!"
         ]
         .spacing(20)
-        .align_items(Alignment::Center);
+        .align_x(Center);
 
         let fit = row![
             pick_list(
@@ -122,7 +122,7 @@ impl Image {
                 Some(self.content_fit),
                 Message::ContentFitChanged
             )
-            .width(Length::Fill),
+            .width(Fill),
             pick_list(
                 [RotationStrategy::Floating, RotationStrategy::Solid],
                 Some(match self.rotation {
@@ -131,10 +131,10 @@ impl Image {
                 }),
                 Message::RotationStrategyChanged,
             )
-            .width(Length::Fill),
+            .width(Fill),
         ]
         .spacing(10)
-        .align_items(Alignment::End);
+        .align_y(Bottom);
 
         let properties = row![
             with_value(
@@ -159,12 +159,12 @@ impl Image {
                         .size(12)
                 ]
                 .spacing(10)
-                .align_items(Alignment::Center),
+                .align_y(Center),
                 format!("Rotation: {:.0}°", f32::from(self.rotation.degrees()))
             )
         ]
         .spacing(10)
-        .align_items(Alignment::End);
+        .align_y(Bottom);
 
         container(column![fit, center(i_am_ferris), properties].spacing(10))
             .padding(10)
@@ -206,6 +206,6 @@ fn with_value<'a>(
 ) -> Element<'a, Message> {
     column![control.into(), text(value).size(12).line_height(1.0)]
         .spacing(2)
-        .align_items(Alignment::Center)
+        .align_x(Center)
         .into()
 }

examples/game_of_life/src/main.rs

@@ -9,7 +9,7 @@ use iced::time;
 use iced::widget::{
     button, checkbox, column, container, pick_list, row, slider, text,
 };
-use iced::{Alignment, Element, Length, Subscription, Task, Theme};
+use iced::{Center, Element, Fill, Subscription, Task, Theme};
 use std::time::Duration;
 
 pub fn main() -> iced::Result {
@@ -135,12 +135,9 @@ impl GameOfLife {
                 .map(move |message| Message::Grid(message, version)),
             controls,
         ]
-        .height(Length::Fill);
+        .height(Fill);
 
-        container(content)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .into()
+        container(content).width(Fill).height(Fill).into()
     }
 }
 
@@ -169,7 +166,7 @@ fn view_controls<'a>(
         slider(1.0..=1000.0, speed as f32, Message::SpeedChanged),
         text!("x{speed}").size(16),
     ]
-    .align_items(Alignment::Center)
+    .align_y(Center)
     .spacing(10);
 
     row![
@@ -186,7 +183,7 @@ fn view_controls<'a>(
     ]
     .padding(10)
     .spacing(20)
-    .align_items(Alignment::Center)
+    .align_y(Center)
     .into()
 }
 
@@ -199,7 +196,7 @@ mod grid {
     use iced::widget::canvas::event::{self, Event};
     use iced::widget::canvas::{Cache, Canvas, Frame, Geometry, Path, Text};
     use iced::{
-        Color, Element, Length, Point, Rectangle, Renderer, Size, Theme, Vector,
+        Color, Element, Fill, Point, Rectangle, Renderer, Size, Theme, Vector,
     };
     use rustc_hash::{FxHashMap, FxHashSet};
     use std::future::Future;
@@ -333,10 +330,7 @@ mod grid {
         }
 
         pub fn view(&self) -> Element<Message> {
-            Canvas::new(self)
-                .width(Length::Fill)
-                .height(Length::Fill)
-                .into()
+            Canvas::new(self).width(Fill).height(Fill).into()
         }
 
         pub fn clear(&mut self) {

examples/gradient/src/main.rs

@@ -3,7 +3,7 @@ use iced::gradient;
 use iced::widget::{
     checkbox, column, container, horizontal_space, row, slider, text,
 };
-use iced::{Alignment, Color, Element, Length, Radians, Theme};
+use iced::{Center, Color, Element, Fill, Radians, Theme};
 
 pub fn main() -> iced::Result {
     tracing_subscriber::fmt::init();
@@ -67,8 +67,8 @@ impl Gradient {
 
                 gradient.into()
             })
-            .width(Length::Fill)
-            .height(Length::Fill);
+            .width(Fill)
+            .height(Fill);
 
         let angle_picker = row![
             text("Angle").width(64),
@@ -77,7 +77,7 @@ impl Gradient {
         ]
         .spacing(8)
         .padding(8)
-        .align_items(Alignment::Center);
+        .align_y(Center);
 
         let transparency_toggle = iced::widget::Container::new(
             checkbox("Transparent window", transparent)
@@ -129,6 +129,6 @@ fn color_picker(label: &str, color: Color) -> Element<'_, Color> {
     ]
     .spacing(8)
     .padding(8)
-    .align_items(Alignment::Center)
+    .align_y(Center)
     .into()
 }

examples/integration/src/controls.rs

@@ -1,7 +1,6 @@
 use iced_wgpu::Renderer;
 use iced_widget::{column, container, row, slider, text, text_input};
-use iced_winit::core::alignment;
-use iced_winit::core::{Color, Element, Length, Theme};
+use iced_winit::core::{Color, Element, Length::*, Theme};
 use iced_winit::runtime::{Program, Task};
 
 pub struct Controls {
@@ -86,8 +85,7 @@ impl Program for Controls {
             .spacing(10),
         )
         .padding(10)
-        .height(Length::Fill)
-        .align_y(alignment::Vertical::Bottom)
+        .align_bottom(Fill)
         .into()
     }
 }

examples/layout/src/main.rs

@@ -5,7 +5,7 @@ use iced::widget::{
     pick_list, row, scrollable, text,
 };
 use iced::{
-    color, Alignment, Element, Font, Length, Point, Rectangle, Renderer,
+    color, Center, Element, Fill, Font, Length, Point, Rectangle, Renderer,
     Subscription, Theme,
 };
 
@@ -74,7 +74,7 @@ impl Layout {
             pick_list(Theme::ALL, Some(&self.theme), Message::ThemeSelected),
         ]
         .spacing(20)
-        .align_items(Alignment::Center);
+        .align_y(Center);
 
         let example = center(if self.explain {
             self.example.view().explain(color!(0x0000ff))
@@ -234,7 +234,7 @@ fn application<'a>() -> Element<'a, Message> {
             square(40),
         ]
         .padding(10)
-        .align_items(Alignment::Center),
+        .align_y(Center),
     )
     .style(|theme| {
         let palette = theme.extended_palette();
@@ -248,10 +248,10 @@ fn application<'a>() -> Element<'a, Message> {
             .spacing(40)
             .padding(10)
             .width(200)
-            .align_items(Alignment::Center),
+            .align_x(Center),
     )
     .style(container::rounded_box)
-    .center_y(Length::Fill);
+    .center_y(Fill);
 
     let content = container(
         scrollable(
@@ -263,10 +263,10 @@ fn application<'a>() -> Element<'a, Message> {
                 "The end"
             ]
             .spacing(40)
-            .align_items(Alignment::Center)
-            .width(Length::Fill),
+            .align_x(Center)
+            .width(Fill),
         )
-        .height(Length::Fill),
+        .height(Fill),
     )
     .padding(10);
 

examples/lazy/src/main.rs

@@ -2,7 +2,7 @@ use iced::widget::{
     button, column, horizontal_space, lazy, pick_list, row, scrollable, text,
     text_input,
 };
-use iced::{Element, Length};
+use iced::{Element, Fill};
 
 use std::collections::HashSet;
 use std::hash::Hash;
@@ -187,7 +187,7 @@ impl App {
         });
 
         column![
-            scrollable(options).height(Length::Fill),
+            scrollable(options).height(Fill),
             row![
                 text_input("Add a new option", &self.input)
                     .on_input(Message::InputChanged)

examples/loading_spinners/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{center, column, row, slider, text};
-use iced::Element;
+use iced::{Center, Element};
 
 use std::time::Duration;
 
@@ -67,7 +67,7 @@ impl LoadingSpinners {
                         Duration::from_secs_f32(self.cycle_duration)
                     )
                 ]
-                .align_items(iced::Alignment::Center)
+                .align_y(Center)
                 .spacing(20.0),
             )
         })
@@ -83,7 +83,7 @@ impl LoadingSpinners {
                     .width(200.0),
                     text!("{:.2}s", self.cycle_duration),
                 ]
-                .align_items(iced::Alignment::Center)
+                .align_y(Center)
                 .spacing(20.0),
             ),
         )

examples/loupe/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{button, center, column, text};
-use iced::{Alignment, Element};
+use iced::{Center, Element};
 
 use loupe::loupe;
 
@@ -39,7 +39,7 @@ impl Loupe {
                 button("Decrement").on_press(Message::Decrement)
             ]
             .padding(20)
-            .align_items(Alignment::Center),
+            .align_x(Center),
         ))
         .into()
     }

examples/modal/src/main.rs

@@ -5,7 +5,7 @@ use iced::widget::{
     self, button, center, column, container, horizontal_space, mouse_area,
     opaque, pick_list, row, stack, text, text_input,
 };
-use iced::{Alignment, Color, Element, Length, Subscription, Task};
+use iced::{Bottom, Color, Element, Fill, Subscription, Task};
 
 use std::fmt;
 
@@ -96,18 +96,17 @@ impl App {
         let content = container(
             column![
                 row![text("Top Left"), horizontal_space(), text("Top Right")]
-                    .align_items(Alignment::Start)
-                    .height(Length::Fill),
+                    .height(Fill),
                 center(button(text("Show Modal")).on_press(Message::ShowModal)),
                 row![
                     text("Bottom Left"),
                     horizontal_space(),
                     text("Bottom Right")
                 ]
-                .align_items(Alignment::End)
-                .height(Length::Fill),
+                .align_y(Bottom)
+                .height(Fill),
             ]
-            .height(Length::Fill),
+            .height(Fill),
         )
         .padding(10);
 

examples/multi_window/src/main.rs

@@ -3,7 +3,7 @@ use iced::widget::{
     text_input,
 };
 use iced::window;
-use iced::{Alignment, Element, Length, Subscription, Task, Theme, Vector};
+use iced::{Center, Element, Fill, Subscription, Task, Theme, Vector};
 
 use std::collections::BTreeMap;
 
@@ -188,8 +188,8 @@ impl Window {
         let content = scrollable(
             column![scale_input, title_input, new_window_button]
                 .spacing(50)
-                .width(Length::Fill)
-                .align_items(Alignment::Center),
+                .width(Fill)
+                .align_x(Center),
         );
 
         container(content).center_x(200).into()

examples/multitouch/src/main.rs

@@ -6,7 +6,7 @@ use iced::touch;
 use iced::widget::canvas::event;
 use iced::widget::canvas::stroke::{self, Stroke};
 use iced::widget::canvas::{self, Canvas, Geometry};
-use iced::{Color, Element, Length, Point, Rectangle, Renderer, Theme};
+use iced::{Color, Element, Fill, Point, Rectangle, Renderer, Theme};
 
 use std::collections::HashMap;
 
@@ -46,10 +46,7 @@ impl Multitouch {
     }
 
     fn view(&self) -> Element<Message> {
-        Canvas::new(self)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .into()
+        Canvas::new(self).width(Fill).height(Fill).into()
     }
 }
 

examples/pane_grid/src/main.rs

@@ -1,10 +1,9 @@
-use iced::alignment::{self, Alignment};
 use iced::keyboard;
 use iced::widget::pane_grid::{self, PaneGrid};
 use iced::widget::{
     button, column, container, responsive, row, scrollable, text,
 };
-use iced::{Color, Element, Length, Size, Subscription};
+use iced::{Center, Color, Element, Fill, Size, Subscription};
 
 pub fn main() -> iced::Result {
     iced::application("Pane Grid - Iced", Example::update, Example::view)
@@ -178,16 +177,16 @@ impl Example {
                 style::pane_active
             })
         })
-        .width(Length::Fill)
-        .height(Length::Fill)
+        .width(Fill)
+        .height(Fill)
         .spacing(10)
         .on_click(Message::Clicked)
         .on_drag(Message::Dragged)
         .on_resize(10, Message::Resized);
 
         container(pane_grid)
-            .width(Length::Fill)
-            .height(Length::Fill)
+            .width(Fill)
+            .height(Fill)
             .padding(10)
             .into()
     }
@@ -255,15 +254,10 @@ fn view_content<'a>(
     size: Size,
 ) -> Element<'a, Message> {
     let button = |label, message| {
-        button(
-            text(label)
-                .width(Length::Fill)
-                .horizontal_alignment(alignment::Horizontal::Center)
-                .size(16),
-        )
-        .width(Length::Fill)
-        .padding(8)
-        .on_press(message)
+        button(text(label).width(Fill).align_x(Center).size(16))
+            .width(Fill)
+            .padding(8)
+            .on_press(message)
     };
 
     let controls = column![
@@ -287,10 +281,10 @@ fn view_content<'a>(
     let content =
         column![text!("{}x{}", size.width, size.height).size(24), controls,]
             .spacing(10)
-            .align_items(Alignment::Center);
+            .align_x(Center);
 
     container(scrollable(content))
-        .center_y(Length::Fill)
+        .center_y(Fill)
         .padding(5)
         .into()
 }

examples/pick_list/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{column, pick_list, scrollable, vertical_space};
-use iced::{Alignment, Element, Length};
+use iced::{Center, Element, Fill};
 
 pub fn main() -> iced::Result {
     iced::run("Pick List - Iced", Example::update, Example::view)
@@ -38,8 +38,8 @@ impl Example {
             pick_list,
             vertical_space().height(600),
         ]
-        .width(Length::Fill)
-        .align_items(Alignment::Center)
+        .width(Fill)
+        .align_x(Center)
         .spacing(10);
 
         scrollable(content).into()

examples/pokedex/src/main.rs

@@ -1,6 +1,6 @@
 use iced::futures;
 use iced::widget::{self, center, column, image, row, text};
-use iced::{Alignment, Element, Length, Task};
+use iced::{Center, Element, Fill, Right, Task};
 
 pub fn main() -> iced::Result {
     iced::application(Pokedex::title, Pokedex::update, Pokedex::view)
@@ -63,10 +63,9 @@ impl Pokedex {
     }
 
     fn view(&self) -> Element<Message> {
-        let content = match self {
+        let content: Element<_> = match self {
             Pokedex::Loading => {
-                column![text("Searching for Pokémon...").size(40),]
-                    .width(Length::Shrink)
+                text("Searching for Pokémon...").size(40).into()
             }
             Pokedex::Loaded { pokemon } => column![
                 pokemon.view(),
@@ -74,13 +73,15 @@ impl Pokedex {
             ]
             .max_width(500)
             .spacing(20)
-            .align_items(Alignment::End),
+            .align_x(Right)
+            .into(),
             Pokedex::Errored => column![
                 text("Whoops! Something went wrong...").size(40),
                 button("Try again").on_press(Message::Search)
             ]
             .spacing(20)
-            .align_items(Alignment::End),
+            .align_x(Right)
+            .into(),
         };
 
         center(content).into()
@@ -103,17 +104,17 @@ impl Pokemon {
             image::viewer(self.image.clone()),
             column![
                 row![
-                    text(&self.name).size(30).width(Length::Fill),
+                    text(&self.name).size(30).width(Fill),
                     text!("#{}", self.number).size(20).color([0.5, 0.5, 0.5]),
                 ]
-                .align_items(Alignment::Center)
+                .align_y(Center)
                 .spacing(20),
                 self.description.as_ref(),
             ]
             .spacing(20),
         ]
         .spacing(20)
-        .align_items(Alignment::Center)
+        .align_y(Center)
         .into()
     }
 

examples/qr_code/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{center, column, pick_list, qr_code, row, text, text_input};
-use iced::{Alignment, Element, Theme};
+use iced::{Center, Element, Theme};
 
 pub fn main() -> iced::Result {
     iced::application(
@@ -58,7 +58,7 @@ impl QRGenerator {
             pick_list(Theme::ALL, Some(&self.theme), Message::ThemeChanged,)
         ]
         .spacing(10)
-        .align_items(Alignment::Center);
+        .align_y(Center);
 
         let content = column![title, input, choose_theme]
             .push_maybe(
@@ -68,7 +68,7 @@ impl QRGenerator {
             )
             .width(700)
             .spacing(20)
-            .align_items(Alignment::Center);
+            .align_x(Center);
 
         center(content).padding(20).into()
     }

examples/screenshot/src/main.rs

@@ -1,10 +1,10 @@
-use iced::alignment;
 use iced::keyboard;
 use iced::widget::{button, column, container, image, row, text, text_input};
 use iced::window;
 use iced::window::screenshot::{self, Screenshot};
 use iced::{
-    Alignment, ContentFit, Element, Length, Rectangle, Subscription, Task,
+    Center, ContentFit, Element, Fill, FillPortion, Rectangle, Subscription,
+    Task,
 };
 
 use ::image as img;
@@ -114,45 +114,37 @@ impl Example {
                 screenshot.clone(),
             ))
             .content_fit(ContentFit::Contain)
-            .width(Length::Fill)
-            .height(Length::Fill)
+            .width(Fill)
+            .height(Fill)
             .into()
         } else {
             text("Press the button to take a screenshot!").into()
         };
 
         let image = container(image)
-            .center_y(Length::FillPortion(2))
+            .center_y(FillPortion(2))
             .padding(10)
             .style(container::rounded_box);
 
         let crop_origin_controls = row![
-            text("X:")
-                .vertical_alignment(alignment::Vertical::Center)
-                .width(30),
+            text("X:").width(30),
             numeric_input("0", self.x_input_value).map(Message::XInputChanged),
-            text("Y:")
-                .vertical_alignment(alignment::Vertical::Center)
-                .width(30),
+            text("Y:").width(30),
             numeric_input("0", self.y_input_value).map(Message::YInputChanged)
         ]
         .spacing(10)
-        .align_items(Alignment::Center);
+        .align_y(Center);
 
         let crop_dimension_controls = row![
-            text("W:")
-                .vertical_alignment(alignment::Vertical::Center)
-                .width(30),
+            text("W:").width(30),
             numeric_input("0", self.width_input_value)
                 .map(Message::WidthInputChanged),
-            text("H:")
-                .vertical_alignment(alignment::Vertical::Center)
-                .width(30),
+            text("H:").width(30),
             numeric_input("0", self.height_input_value)
                 .map(Message::HeightInputChanged)
         ]
         .spacing(10)
-        .align_items(Alignment::Center);
+        .align_y(Center);
 
         let crop_controls =
             column![crop_origin_controls, crop_dimension_controls]
@@ -162,7 +154,7 @@ impl Example {
                         .map(|error| text!("Crop error! \n{error}")),
                 )
                 .spacing(10)
-                .align_items(Alignment::Center);
+                .align_x(Center);
 
         let controls = {
             let save_result =
@@ -178,8 +170,8 @@ impl Example {
             column![
                 column![
                     button(centered_text("Screenshot!"))
-                        .padding([10, 20, 10, 20])
-                        .width(Length::Fill)
+                        .padding([10, 20])
+                        .width(Fill)
                         .on_press(Message::Screenshot),
                     if !self.png_saving {
                         button(centered_text("Save as png")).on_press_maybe(
@@ -190,8 +182,8 @@ impl Example {
                             .style(button::secondary)
                     }
                     .style(button::secondary)
-                    .padding([10, 20, 10, 20])
-                    .width(Length::Fill)
+                    .padding([10, 20])
+                    .width(Fill)
                 ]
                 .spacing(10),
                 column![
@@ -199,23 +191,23 @@ impl Example {
                     button(centered_text("Crop"))
                         .on_press(Message::Crop)
                         .style(button::danger)
-                        .padding([10, 20, 10, 20])
-                        .width(Length::Fill),
+                        .padding([10, 20])
+                        .width(Fill),
                 ]
                 .spacing(10)
-                .align_items(Alignment::Center),
+                .align_x(Center),
             ]
             .push_maybe(save_result.map(text))
             .spacing(40)
         };
 
-        let side_content = container(controls).center_y(Length::Fill);
+        let side_content = container(controls).center_y(Fill);
 
         let content = row![side_content, image]
             .spacing(10)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .align_items(Alignment::Center);
+            .width(Fill)
+            .height(Fill)
+            .align_y(Center);
 
         container(content).padding(10).into()
     }
@@ -276,8 +268,5 @@ fn numeric_input(
 }
 
 fn centered_text(content: &str) -> Element<'_, Message> {
-    text(content)
-        .width(Length::Fill)
-        .horizontal_alignment(alignment::Horizontal::Center)
-        .into()
+    text(content).width(Fill).align_x(Center).into()
 }

examples/scrollable/src/main.rs

@@ -2,7 +2,7 @@ use iced::widget::{
     button, column, container, horizontal_space, progress_bar, radio, row,
     scrollable, slider, text, vertical_space,
 };
-use iced::{Alignment, Border, Color, Element, Length, Task, Theme};
+use iced::{Border, Center, Color, Element, Fill, Task, Theme};
 
 use once_cell::sync::Lazy;
 
@@ -24,7 +24,7 @@ struct ScrollableDemo {
     scrollbar_margin: u16,
     scroller_width: u16,
     current_scroll_offset: scrollable::RelativeOffset,
-    alignment: scrollable::Alignment,
+    anchor: scrollable::Anchor,
 }
 
 #[derive(Debug, Clone, Eq, PartialEq, Copy)]
@@ -37,7 +37,7 @@ enum Direction {
 #[derive(Debug, Clone)]
 enum Message {
     SwitchDirection(Direction),
-    AlignmentChanged(scrollable::Alignment),
+    AlignmentChanged(scrollable::Anchor),
     ScrollbarWidthChanged(u16),
     ScrollbarMarginChanged(u16),
     ScrollerWidthChanged(u16),
@@ -54,7 +54,7 @@ impl ScrollableDemo {
             scrollbar_margin: 0,
             scroller_width: 10,
             current_scroll_offset: scrollable::RelativeOffset::START,
-            alignment: scrollable::Alignment::Start,
+            anchor: scrollable::Anchor::Start,
         }
     }
 
@@ -71,7 +71,7 @@ impl ScrollableDemo {
             }
             Message::AlignmentChanged(alignment) => {
                 self.current_scroll_offset = scrollable::RelativeOffset::START;
-                self.alignment = alignment;
+                self.anchor = alignment;
 
                 scrollable::snap_to(
                     SCROLLABLE_ID.clone(),
@@ -168,14 +168,14 @@ impl ScrollableDemo {
             text("Scrollable alignment:"),
             radio(
                 "Start",
-                scrollable::Alignment::Start,
-                Some(self.alignment),
+                scrollable::Anchor::Start,
+                Some(self.anchor),
                 Message::AlignmentChanged,
             ),
             radio(
                 "End",
-                scrollable::Alignment::End,
-                Some(self.alignment),
+                scrollable::Anchor::End,
+                Some(self.anchor),
                 Message::AlignmentChanged,
             )
         ]
@@ -212,19 +212,20 @@ impl ScrollableDemo {
                         text("End!"),
                         scroll_to_beginning_button(),
                     ]
-                    .align_items(Alignment::Center)
-                    .padding([40, 0, 40, 0])
+                    .align_x(Center)
+                    .padding([40, 0])
                     .spacing(40),
                 )
-                .direction(scrollable::Direction::Vertical(
-                    scrollable::Scrollbar::new()
+                .direction(scrollable::Direction::Vertical {
+                    scrollbar: scrollable::Scrollbar::new()
                         .width(self.scrollbar_width)
                         .margin(self.scrollbar_margin)
                         .scroller_width(self.scroller_width)
-                        .alignment(self.alignment),
-                ))
-                .width(Length::Fill)
-                .height(Length::Fill)
+                        .anchor(self.anchor),
+                    spacing: None,
+                })
+                .width(Fill)
+                .height(Fill)
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
                 Direction::Horizontal => scrollable(
@@ -238,19 +239,20 @@ impl ScrollableDemo {
                         scroll_to_beginning_button(),
                     ]
                     .height(450)
-                    .align_items(Alignment::Center)
-                    .padding([0, 40, 0, 40])
+                    .align_y(Center)
+                    .padding([0, 40])
                     .spacing(40),
                 )
-                .direction(scrollable::Direction::Horizontal(
-                    scrollable::Scrollbar::new()
+                .direction(scrollable::Direction::Horizontal {
+                    scrollbar: scrollable::Scrollbar::new()
                         .width(self.scrollbar_width)
                         .margin(self.scrollbar_margin)
                         .scroller_width(self.scroller_width)
-                        .alignment(self.alignment),
-                ))
-                .width(Length::Fill)
-                .height(Length::Fill)
+                        .anchor(self.anchor),
+                    spacing: None,
+                })
+                .width(Fill)
+                .height(Fill)
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
                 Direction::Multi => scrollable(
@@ -280,8 +282,8 @@ impl ScrollableDemo {
                         text("Horizontal - End!"),
                         scroll_to_beginning_button(),
                     ]
-                    .align_items(Alignment::Center)
-                    .padding([0, 40, 0, 40])
+                    .align_y(Center)
+                    .padding([0, 40])
                     .spacing(40),
                 )
                 .direction({
@@ -289,15 +291,15 @@ impl ScrollableDemo {
                         .width(self.scrollbar_width)
                         .margin(self.scrollbar_margin)
                         .scroller_width(self.scroller_width)
-                        .alignment(self.alignment);
+                        .anchor(self.anchor);
 
                     scrollable::Direction::Both {
                         horizontal: scrollbar,
                         vertical: scrollbar,
                     }
                 })
-                .width(Length::Fill)
-                .height(Length::Fill)
+                .width(Fill)
+                .height(Fill)
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
             });
@@ -322,7 +324,7 @@ impl ScrollableDemo {
 
         let content: Element<Message> =
             column![scroll_controls, scrollable_content, progress_bars]
-                .align_items(Alignment::Center)
+                .align_x(Center)
                 .spacing(10)
                 .into();
 

examples/sierpinski_triangle/src/main.rs

@@ -2,7 +2,7 @@ use iced::mouse;
 use iced::widget::canvas::event::{self, Event};
 use iced::widget::canvas::{self, Canvas, Geometry};
 use iced::widget::{column, row, slider, text};
-use iced::{Color, Length, Point, Rectangle, Renderer, Size, Theme};
+use iced::{Center, Color, Fill, Point, Rectangle, Renderer, Size, Theme};
 
 use rand::Rng;
 use std::fmt::Debug;
@@ -50,9 +50,7 @@ impl SierpinskiEmulator {
 
     fn view(&self) -> iced::Element<'_, Message> {
         column![
-            Canvas::new(&self.graph)
-                .width(Length::Fill)
-                .height(Length::Fill),
+            Canvas::new(&self.graph).width(Fill).height(Fill),
             row![
                 text!("Iteration: {:?}", self.graph.iteration),
                 slider(0..=10000, self.graph.iteration, Message::IterationSet)
@@ -60,7 +58,7 @@ impl SierpinskiEmulator {
             .padding(10)
             .spacing(20),
         ]
-        .align_items(iced::Alignment::Center)
+        .align_x(Center)
         .into()
     }
 }

examples/slider/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{column, container, iced, slider, text, vertical_slider};
-use iced::{Alignment, Element, Length};
+use iced::{Center, Element, Fill};
 
 pub fn main() -> iced::Result {
     iced::run("Slider - Iced", Slider::update, Slider::view)
@@ -45,8 +45,8 @@ impl Slider {
         let text = text(self.value);
 
         column![v_slider, h_slider, text, iced(self.value as f32),]
-            .width(Length::Fill)
-            .align_items(Alignment::Center)
+            .width(Fill)
+            .align_x(Center)
             .spacing(20)
             .padding(20)
             .into()

examples/solar_system/src/main.rs

@@ -13,7 +13,7 @@ use iced::widget::canvas::stroke::{self, Stroke};
 use iced::widget::canvas::{Geometry, Path};
 use iced::window;
 use iced::{
-    Color, Element, Length, Point, Rectangle, Renderer, Size, Subscription,
+    Color, Element, Fill, Point, Rectangle, Renderer, Size, Subscription,
     Theme, Vector,
 };
 
@@ -52,10 +52,7 @@ impl SolarSystem {
     }
 
     fn view(&self) -> Element<Message> {
-        canvas(&self.state)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .into()
+        canvas(&self.state).width(Fill).height(Fill).into()
     }
 
     fn theme(&self) -> Theme {

examples/stopwatch/src/main.rs

@@ -1,8 +1,7 @@
-use iced::alignment;
 use iced::keyboard;
 use iced::time;
 use iced::widget::{button, center, column, row, text};
-use iced::{Alignment, Element, Subscription, Theme};
+use iced::{Center, Element, Subscription, Theme};
 
 use std::time::{Duration, Instant};
 
@@ -101,13 +100,8 @@ impl Stopwatch {
         )
         .size(40);
 
-        let button = |label| {
-            button(
-                text(label).horizontal_alignment(alignment::Horizontal::Center),
-            )
-            .padding(10)
-            .width(80)
-        };
+        let button =
+            |label| button(text(label).align_x(Center)).padding(10).width(80);
 
         let toggle_button = {
             let label = match self.state {
@@ -124,9 +118,7 @@ impl Stopwatch {
 
         let controls = row![toggle_button, reset_button].spacing(20);
 
-        let content = column![duration, controls]
-            .align_items(Alignment::Center)
-            .spacing(20);
+        let content = column![duration, controls].align_x(Center).spacing(20);
 
         center(content).into()
     }

examples/styling/src/main.rs

@@ -3,7 +3,7 @@ use iced::widget::{
     row, scrollable, slider, text, text_input, toggler, vertical_rule,
     vertical_space,
 };
-use iced::{Alignment, Element, Length, Theme};
+use iced::{Center, Element, Fill, Theme};
 
 pub fn main() -> iced::Result {
     iced::application("Styling - Iced", Styling::update, Styling::view)
@@ -48,7 +48,7 @@ impl Styling {
         let choose_theme = column![
             text("Theme:"),
             pick_list(Theme::ALL, Some(&self.theme), Message::ThemeChanged)
-                .width(Length::Fill),
+                .width(Fill),
         ]
         .spacing(10);
 
@@ -71,7 +71,7 @@ impl Styling {
             vertical_space().height(800),
             "You did it!"
         ])
-        .width(Length::Fill)
+        .width(Fill)
         .height(100);
 
         let checkbox = checkbox("Check me!", self.checkbox_value)
@@ -82,15 +82,12 @@ impl Styling {
             self.toggler_value,
             Message::TogglerToggled,
         )
-        .width(Length::Shrink)
         .spacing(10);
 
         let content = column![
             choose_theme,
             horizontal_rule(38),
-            row![text_input, button]
-                .spacing(10)
-                .align_items(Alignment::Center),
+            row![text_input, button].spacing(10).align_y(Center),
             slider,
             progress_bar,
             row![
@@ -100,7 +97,7 @@ impl Styling {
             ]
             .spacing(10)
             .height(100)
-            .align_items(Alignment::Center),
+            .align_y(Center),
         ]
         .spacing(20)
         .padding(20)

examples/svg/src/main.rs

@@ -1,5 +1,5 @@
 use iced::widget::{center, checkbox, column, container, svg};
-use iced::{color, Element, Length};
+use iced::{color, Element, Fill};
 
 pub fn main() -> iced::Result {
     iced::run("SVG - Iced", Tiger::update, Tiger::view)
@@ -30,24 +30,26 @@ impl Tiger {
             env!("CARGO_MANIFEST_DIR")
         ));
 
-        let svg = svg(handle).width(Length::Fill).height(Length::Fill).style(
-            |_theme, _status| svg::Style {
-                color: if self.apply_color_filter {
-                    Some(color!(0x0000ff))
-                } else {
-                    None
-                },
-            },
-        );
+        let svg =
+            svg(handle)
+                .width(Fill)
+                .height(Fill)
+                .style(|_theme, _status| svg::Style {
+                    color: if self.apply_color_filter {
+                        Some(color!(0x0000ff))
+                    } else {
+                        None
+                    },
+                });
 
         let apply_color_filter =
             checkbox("Apply a color filter", self.apply_color_filter)
                 .on_toggle(Message::ToggleColorFilter);
 
         center(
-            column![svg, container(apply_color_filter).center_x(Length::Fill)]
+            column![svg, container(apply_color_filter).center_x(Fill)]
                 .spacing(20)
-                .height(Length::Fill),
+                .height(Fill),
         )
         .padding(20)
         .into()

examples/the_matrix/src/main.rs

@@ -2,8 +2,7 @@ use iced::mouse;
 use iced::time::{self, Instant};
 use iced::widget::canvas;
 use iced::{
-    Color, Element, Font, Length, Point, Rectangle, Renderer, Subscription,
-    Theme,
+    Color, Element, Fill, Font, Point, Rectangle, Renderer, Subscription, Theme,
 };
 
 use std::cell::RefCell;
@@ -37,10 +36,7 @@ impl TheMatrix {
     }
 
     fn view(&self) -> Element<Message> {
-        canvas(self as &Self)
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .into()
+        canvas(self as &Self).width(Fill).height(Fill).into()
     }
 
     fn subscription(&self) -> Subscription<Message> {

examples/toast/src/main.rs

@@ -4,7 +4,7 @@ use iced::keyboard::key;
 use iced::widget::{
     self, button, center, column, pick_list, row, slider, text, text_input,
 };
-use iced::{Alignment, Element, Length, Subscription, Task};
+use iced::{Center, Element, Fill, Subscription, Task};
 
 use toast::{Status, Toast};
 
@@ -125,7 +125,7 @@ impl App {
                         Some(self.editing.status),
                         Message::Status
                     )
-                    .width(Length::Fill)
+                    .width(Fill)
                     .into()
                 ),
                 subtitle(
@@ -142,7 +142,7 @@ impl App {
                     .spacing(5)
                     .into()
                 ),
-                column![add_toast].align_items(Alignment::End)
+                column![add_toast].align_x(Center)
             ]
             .spacing(10)
             .max_width(200),
@@ -177,8 +177,8 @@ mod toast {
     };
     use iced::window;
     use iced::{
-        Alignment, Element, Length, Point, Rectangle, Renderer, Size, Theme,
-        Vector,
+        Alignment, Center, Element, Fill, Length, Point, Rectangle, Renderer,
+        Size, Theme, Vector,
     };
 
     pub const DEFAULT_TIMEOUT: u64 = 5;
@@ -245,9 +245,9 @@ mod toast {
                                     .on_press((on_close)(index))
                                     .padding(3),
                             ]
-                            .align_items(Alignment::Center)
+                            .align_y(Center)
                         )
-                        .width(Length::Fill)
+                        .width(Fill)
                         .padding(5)
                         .style(match toast.status {
                             Status::Primary => primary,
@@ -257,7 +257,7 @@ mod toast {
                         }),
                         horizontal_rule(1),
                         container(text(toast.body.as_str()))
-                            .width(Length::Fill)
+                            .width(Fill)
                             .padding(5)
                             .style(container::rounded_box),
                     ])
@@ -479,8 +479,8 @@ mod toast {
                 layout::flex::Axis::Vertical,
                 renderer,
                 &limits,
-                Length::Fill,
-                Length::Fill,
+                Fill,
+                Fill,
                 10.into(),
                 10.0,
                 Alignment::End,

examples/todos/src/main.rs

@@ -1,11 +1,10 @@
-use iced::alignment::{self, Alignment};
 use iced::keyboard;
 use iced::widget::{
     self, button, center, checkbox, column, container, keyed_column, row,
     scrollable, text, text_input, Text,
 };
 use iced::window;
-use iced::{Element, Font, Length, Subscription, Task as Command};
+use iced::{Center, Element, Fill, Font, Subscription, Task as Command};
 
 use once_cell::sync::Lazy;
 use serde::{Deserialize, Serialize};
@@ -193,10 +192,10 @@ impl Todos {
                 ..
             }) => {
                 let title = text("todos")
-                    .width(Length::Fill)
+                    .width(Fill)
                     .size(100)
                     .color([0.5, 0.5, 0.5])
-                    .horizontal_alignment(alignment::Horizontal::Center);
+                    .align_x(Center);
 
                 let input = text_input("What needs to be done?", input_value)
                     .id(INPUT_ID.clone())
@@ -240,10 +239,7 @@ impl Todos {
                     .spacing(20)
                     .max_width(800);
 
-                scrollable(
-                    container(content).center_x(Length::Fill).padding(40),
-                )
-                .into()
+                scrollable(container(content).center_x(Fill).padding(40)).into()
             }
         }
     }
@@ -343,7 +339,7 @@ impl Task {
             TaskState::Idle => {
                 let checkbox = checkbox(&self.description, self.completed)
                     .on_toggle(TaskMessage::Completed)
-                    .width(Length::Fill)
+                    .width(Fill)
                     .size(17)
                     .text_shaping(text::Shaping::Advanced);
 
@@ -355,7 +351,7 @@ impl Task {
                         .style(button::text),
                 ]
                 .spacing(20)
-                .align_items(Alignment::Center)
+                .align_y(Center)
                 .into()
             }
             TaskState::Editing => {
@@ -371,14 +367,14 @@ impl Task {
                     button(
                         row![delete_icon(), "Delete"]
                             .spacing(10)
-                            .align_items(Alignment::Center)
+                            .align_y(Center)
                     )
                     .on_press(TaskMessage::Delete)
                     .padding(10)
                     .style(button::danger)
                 ]
                 .spacing(20)
-                .align_items(Alignment::Center)
+                .align_y(Center)
                 .into()
             }
         }
@@ -405,17 +401,16 @@ fn view_controls(tasks: &[Task], current_filter: Filter) -> Element<Message> {
             "{tasks_left} {} left",
             if tasks_left == 1 { "task" } else { "tasks" }
         )
-        .width(Length::Fill),
+        .width(Fill),
         row![
             filter_button("All", Filter::All, current_filter),
             filter_button("Active", Filter::Active, current_filter),
             filter_button("Completed", Filter::Completed, current_filter,),
         ]
-        .width(Length::Shrink)
         .spacing(10)
     ]
     .spacing(20)
-    .align_items(Alignment::Center)
+    .align_y(Center)
     .into()
 }
 
@@ -440,20 +435,15 @@ impl Filter {
 }
 
 fn loading_message<'a>() -> Element<'a, Message> {
-    center(
-        text("Loading...")
-            .horizontal_alignment(alignment::Horizontal::Center)
-            .size(50),
-    )
-    .into()
+    center(text("Loading...").width(Fill).align_x(Center).size(50)).into()
 }
 
 fn empty_message(message: &str) -> Element<'_, Message> {
     center(
         text(message)
-            .width(Length::Fill)
+            .width(Fill)
             .size(25)
-            .horizontal_alignment(alignment::Horizontal::Center)
+            .align_x(Center)
             .color([0.7, 0.7, 0.7]),
     )
     .height(200)
@@ -467,7 +457,7 @@ fn icon(unicode: char) -> Text<'static> {
     text(unicode.to_string())
         .font(ICONS)
         .width(20)
-        .horizontal_alignment(alignment::Horizontal::Center)
+        .align_x(Center)
 }
 
 fn edit_icon() -> Text<'static> {

examples/tour/src/main.rs

@@ -1,10 +1,9 @@
-use iced::alignment::{self, Alignment};
 use iced::widget::{
     button, checkbox, column, container, horizontal_space, image, radio, row,
     scrollable, slider, text, text_input, toggler, vertical_space,
 };
 use iced::widget::{Button, Column, Container, Slider};
-use iced::{Color, Element, Font, Length, Pixels};
+use iced::{Center, Color, Element, Fill, Font, Pixels};
 
 pub fn main() -> iced::Result {
     #[cfg(target_arch = "wasm32")]
@@ -173,10 +172,10 @@ impl Tour {
             } else {
                 content
             })
-            .center_x(Length::Fill),
+            .center_x(Fill),
         );
 
-        container(scrollable).center_y(Length::Fill).into()
+        container(scrollable).center_y(Fill).into()
     }
 
     fn can_continue(&self) -> bool {
@@ -235,11 +234,7 @@ impl Tour {
                  0 to 100:",
             )
             .push(slider(0..=100, self.slider, Message::SliderChanged))
-            .push(
-                text(self.slider.to_string())
-                    .width(Length::Fill)
-                    .horizontal_alignment(alignment::Horizontal::Center),
-            )
+            .push(text(self.slider.to_string()).width(Fill).align_x(Center))
     }
 
     fn rows_and_columns(&self) -> Column<Message> {
@@ -268,9 +263,7 @@ impl Tour {
 
         let spacing_section = column![
             slider(0..=80, self.spacing, Message::SpacingChanged),
-            text!("{} px", self.spacing)
-                .width(Length::Fill)
-                .horizontal_alignment(alignment::Horizontal::Center),
+            text!("{} px", self.spacing).width(Fill).align_x(Center),
         ]
         .spacing(10);
 
@@ -381,11 +374,7 @@ impl Tour {
             .push("An image that tries to keep its aspect ratio.")
             .push(ferris(width, filter_method))
             .push(slider(100..=500, width, Message::ImageWidthChanged))
-            .push(
-                text!("Width: {width} px")
-                    .width(Length::Fill)
-                    .horizontal_alignment(alignment::Horizontal::Center),
-            )
+            .push(text!("Width: {width} px").width(Fill).align_x(Center))
             .push(
                 checkbox(
                     "Use nearest interpolation",
@@ -393,7 +382,7 @@ impl Tour {
                 )
                 .on_toggle(Message::ImageUseNearestToggled),
             )
-            .align_items(Alignment::Center)
+            .align_x(Center)
     }
 
     fn scrollable(&self) -> Column<Message> {
@@ -409,18 +398,13 @@ impl Tour {
             .push(vertical_space().height(4096))
             .push(
                 text("You are halfway there!")
-                    .width(Length::Fill)
+                    .width(Fill)
                     .size(30)
-                    .horizontal_alignment(alignment::Horizontal::Center),
+                    .align_x(Center),
             )
             .push(vertical_space().height(4096))
             .push(ferris(300, image::FilterMethod::Linear))
-            .push(
-                text("You made it!")
-                    .width(Length::Fill)
-                    .size(50)
-                    .horizontal_alignment(alignment::Horizontal::Center),
-            )
+            .push(text("You made it!").width(Fill).size(50).align_x(Center))
     }
 
     fn text_input(&self) -> Column<Message> {
@@ -464,8 +448,8 @@ impl Tour {
                 } else {
                     value
                 })
-                .width(Length::Fill)
-                .horizontal_alignment(alignment::Horizontal::Center),
+                .width(Fill)
+                .align_x(Center),
             )
     }
 
@@ -570,7 +554,7 @@ fn ferris<'a>(
         .filter_method(filter_method)
         .width(width),
     )
-    .center_x(Length::Fill)
+    .center_x(Fill)
 }
 
 fn padded_button<Message: Clone>(label: &str) -> Button<'_, Message> {

examples/vectorial_text/src/main.rs

@@ -1,9 +1,9 @@
-use iced::alignment::{self, Alignment};
+use iced::alignment;
 use iced::mouse;
 use iced::widget::{
     canvas, checkbox, column, horizontal_space, row, slider, text,
 };
-use iced::{Element, Length, Point, Rectangle, Renderer, Theme, Vector};
+use iced::{Center, Element, Fill, Point, Rectangle, Renderer, Theme, Vector};
 
 pub fn main() -> iced::Result {
     iced::application(
@@ -59,7 +59,7 @@ impl VectorialText {
         };
 
         column![
-            canvas(&self.state).width(Length::Fill).height(Length::Fill),
+            canvas(&self.state).width(Fill).height(Fill),
             column![
                 checkbox("Use Japanese", self.state.use_japanese,)
                     .on_toggle(Message::ToggleJapanese),
@@ -85,7 +85,7 @@ impl VectorialText {
                 ]
                 .spacing(20),
             ]
-            .align_items(Alignment::Center)
+            .align_x(Center)
             .spacing(10)
         ]
         .spacing(10)

examples/visible_bounds/src/main.rs

@@ -5,8 +5,8 @@ use iced::widget::{
 };
 use iced::window;
 use iced::{
-    Alignment, Color, Element, Font, Length, Point, Rectangle, Subscription,
-    Task, Theme,
+    Center, Color, Element, Fill, Font, Point, Rectangle, Subscription, Task,
+    Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -70,7 +70,7 @@ impl Example {
                     .color_maybe(color),
             ]
             .height(40)
-            .align_items(Alignment::Center)
+            .align_y(Center)
         };
 
         let view_bounds = |label, bounds: Option<Rectangle>| {
@@ -130,13 +130,13 @@ impl Example {
                         .padding(20)
                     )
                     .on_scroll(|_| Message::Scrolled)
-                    .width(Length::Fill)
+                    .width(Fill)
                     .height(300),
                 ]
                 .padding(20)
             )
             .on_scroll(|_| Message::Scrolled)
-            .width(Length::Fill)
+            .width(Fill)
             .height(300),
         ]
         .spacing(10)

examples/websocket/src/main.rs

@@ -1,10 +1,9 @@
 mod echo;
 
-use iced::alignment::{self, Alignment};
 use iced::widget::{
     self, button, center, column, row, scrollable, text, text_input,
 };
-use iced::{color, Element, Length, Subscription, Task};
+use iced::{color, Center, Element, Fill, Subscription, Task};
 use once_cell::sync::Lazy;
 
 pub fn main() -> iced::Result {
@@ -104,7 +103,7 @@ impl WebSocket {
                     .spacing(10),
             )
             .id(MESSAGE_LOG.clone())
-            .height(Length::Fill)
+            .height(Fill)
             .into()
         };
 
@@ -113,12 +112,8 @@ impl WebSocket {
                 .on_input(Message::NewMessageChanged)
                 .padding(10);
 
-            let mut button = button(
-                text("Send")
-                    .height(40)
-                    .vertical_alignment(alignment::Vertical::Center),
-            )
-            .padding([0, 20]);
+            let mut button = button(text("Send").height(40).align_y(Center))
+                .padding([0, 20]);
 
             if matches!(self.state, State::Connected(_)) {
                 if let Some(message) = echo::Message::new(&self.new_message) {
@@ -127,13 +122,11 @@ impl WebSocket {
                 }
             }
 
-            row![input, button]
-                .spacing(10)
-                .align_items(Alignment::Center)
+            row![input, button].spacing(10).align_y(Center)
         };
 
         column![message_log, new_message_input]
-            .height(Length::Fill)
+            .height(Fill)
             .padding(20)
             .spacing(10)
             .into()

src/lib.rs

@@ -196,6 +196,7 @@ pub use crate::core::alignment;
 pub use crate::core::border;
 pub use crate::core::color;
 pub use crate::core::gradient;
+pub use crate::core::padding;
 pub use crate::core::theme;
 pub use crate::core::{
     Alignment, Background, Border, Color, ContentFit, Degrees, Gradient,
@@ -205,6 +206,11 @@ pub use crate::core::{
 pub use crate::runtime::exit;
 pub use iced_futures::Subscription;
 
+pub use alignment::Horizontal::{Left, Right};
+pub use alignment::Vertical::{Bottom, Top};
+pub use Alignment::Center;
+pub use Length::{Fill, FillPortion, Shrink};
+
 pub mod task {
     //! Create runtime tasks.
     pub use crate::runtime::task::{Handle, Task};

widget/src/button.rs

@@ -1,4 +1,5 @@
 //! Allow your users to perform actions by pressing a button.
+use crate::core::border::{self, Border};
 use crate::core::event::{self, Event};
 use crate::core::layout;
 use crate::core::mouse;
@@ -9,8 +10,8 @@ use crate::core::touch;
 use crate::core::widget::tree::{self, Tree};
 use crate::core::widget::Operation;
 use crate::core::{
-    Background, Border, Clipboard, Color, Element, Layout, Length, Padding,
-    Rectangle, Shadow, Shell, Size, Theme, Vector, Widget,
+    Background, Clipboard, Color, Element, Layout, Length, Padding, Rectangle,
+    Shadow, Shell, Size, Theme, Vector, Widget,
 };
 
 /// A generic widget that produces a message when pressed.
@@ -591,7 +592,7 @@ fn styled(pair: palette::Pair) -> Style {
     Style {
         background: Some(Background::Color(pair.color)),
         text_color: pair.text,
-        border: Border::rounded(2),
+        border: border::rounded(2),
         ..Style::default()
     }
 }

widget/src/column.rs

@@ -1,4 +1,5 @@
 //! Distribute content vertically.
+use crate::core::alignment::{self, Alignment};
 use crate::core::event::{self, Event};
 use crate::core::layout;
 use crate::core::mouse;
@@ -6,8 +7,8 @@ use crate::core::overlay;
 use crate::core::renderer;
 use crate::core::widget::{Operation, Tree};
 use crate::core::{
-    Alignment, Clipboard, Element, Layout, Length, Padding, Pixels, Rectangle,
-    Shell, Size, Vector, Widget,
+    Clipboard, Element, Layout, Length, Padding, Pixels, Rectangle, Shell,
+    Size, Vector, Widget,
 };
 
 /// A container that distributes its contents vertically.
@@ -19,7 +20,7 @@ pub struct Column<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer>
     width: Length,
     height: Length,
     max_width: f32,
-    align_items: Alignment,
+    align: Alignment,
     clip: bool,
     children: Vec<Element<'a, Message, Theme, Renderer>>,
 }
@@ -63,7 +64,7 @@ where
             width: Length::Shrink,
             height: Length::Shrink,
             max_width: f32::INFINITY,
-            align_items: Alignment::Start,
+            align: Alignment::Start,
             clip: false,
             children,
         }
@@ -104,8 +105,8 @@ where
     }
 
     /// Sets the horizontal alignment of the contents of the [`Column`] .
-    pub fn align_items(mut self, align: Alignment) -> Self {
-        self.align_items = align;
+    pub fn align_x(mut self, align: impl Into<alignment::Horizontal>) -> Self {
+        self.align = Alignment::from(align.into());
         self
     }
 
@@ -210,7 +211,7 @@ where
             self.height,
             self.padding,
             self.spacing,
-            self.align_items,
+            self.align,
             &self.children,
             &mut tree.children,
         )

widget/src/container.rs

@@ -1,5 +1,6 @@
 //! Decorate content and apply alignment.
 use crate::core::alignment::{self, Alignment};
+use crate::core::border::{self, Border};
 use crate::core::event::{self, Event};
 use crate::core::gradient::{self, Gradient};
 use crate::core::layout;
@@ -9,9 +10,8 @@ use crate::core::renderer;
 use crate::core::widget::tree::{self, Tree};
 use crate::core::widget::{self, Operation};
 use crate::core::{
-    self, Background, Border, Clipboard, Color, Element, Layout, Length,
-    Padding, Pixels, Point, Rectangle, Shadow, Shell, Size, Theme, Vector,
-    Widget,
+    self, Background, Clipboard, Color, Element, Layout, Length, Padding,
+    Pixels, Point, Rectangle, Shadow, Shell, Size, Theme, Vector, Widget,
 };
 use crate::runtime::task::{self, Task};
 
@@ -92,46 +92,6 @@ where
         self
     }
 
-    /// Sets the [`Container`] to fill the available space in the horizontal axis.
-    ///
-    /// This can be useful to quickly position content when chained with
-    /// alignment functions—like [`center_x`].
-    ///
-    /// Calling this method is equivalent to calling [`width`] with a
-    /// [`Length::Fill`].
-    ///
-    /// [`center_x`]: Self::center_x
-    /// [`width`]: Self::width
-    pub fn fill_x(self) -> Self {
-        self.width(Length::Fill)
-    }
-
-    /// Sets the [`Container`] to fill the available space in the vetical axis.
-    ///
-    /// This can be useful to quickly position content when chained with
-    /// alignment functions—like [`center_y`].
-    ///
-    /// Calling this method is equivalent to calling [`height`] with a
-    /// [`Length::Fill`].
-    ///
-    /// [`center_y`]: Self::center_x
-    /// [`height`]: Self::height
-    pub fn fill_y(self) -> Self {
-        self.height(Length::Fill)
-    }
-
-    /// Sets the [`Container`] to fill all the available space.
-    ///
-    /// Calling this method is equivalent to chaining [`fill_x`] and
-    /// [`fill_y`].
-    ///
-    /// [`center`]: Self::center
-    /// [`fill_x`]: Self::fill_x
-    /// [`fill_y`]: Self::fill_y
-    pub fn fill(self) -> Self {
-        self.width(Length::Fill).height(Length::Fill)
-    }
-
     /// Sets the maximum width of the [`Container`].
     pub fn max_width(mut self, max_width: impl Into<Pixels>) -> Self {
         self.max_width = max_width.into().0;
@@ -144,18 +104,6 @@ where
         self
     }
 
-    /// Sets the content alignment for the horizontal axis of the [`Container`].
-    pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
-        self.horizontal_alignment = alignment;
-        self
-    }
-
-    /// Sets the content alignment for the vertical axis of the [`Container`].
-    pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
-        self.vertical_alignment = alignment;
-        self
-    }
-
     /// Sets the width of the [`Container`] and centers its contents horizontally.
     pub fn center_x(self, width: impl Into<Length>) -> Self {
         self.width(width).align_x(alignment::Horizontal::Center)
@@ -179,6 +127,44 @@ where
         self.center_x(length).center_y(length)
     }
 
+    /// Aligns the contents of the [`Container`] to the left.
+    pub fn align_left(self, width: impl Into<Length>) -> Self {
+        self.width(width).align_x(alignment::Horizontal::Left)
+    }
+
+    /// Aligns the contents of the [`Container`] to the right.
+    pub fn align_right(self, width: impl Into<Length>) -> Self {
+        self.width(width).align_x(alignment::Horizontal::Right)
+    }
+
+    /// Aligns the contents of the [`Container`] to the top.
+    pub fn align_top(self, height: impl Into<Length>) -> Self {
+        self.height(height).align_y(alignment::Vertical::Top)
+    }
+
+    /// Aligns the contents of the [`Container`] to the bottom.
+    pub fn align_bottom(self, height: impl Into<Length>) -> Self {
+        self.height(height).align_y(alignment::Vertical::Bottom)
+    }
+
+    /// Sets the content alignment for the horizontal axis of the [`Container`].
+    pub fn align_x(
+        mut self,
+        alignment: impl Into<alignment::Horizontal>,
+    ) -> Self {
+        self.horizontal_alignment = alignment.into();
+        self
+    }
+
+    /// Sets the content alignment for the vertical axis of the [`Container`].
+    pub fn align_y(
+        mut self,
+        alignment: impl Into<alignment::Vertical>,
+    ) -> Self {
+        self.vertical_alignment = alignment.into();
+        self
+    }
+
     /// Sets whether the contents of the [`Container`] should be clipped on
     /// overflow.
     pub fn clip(mut self, clip: bool) -> Self {
@@ -641,7 +627,7 @@ pub fn rounded_box(theme: &Theme) -> Style {
 
     Style {
         background: Some(palette.background.weak.color.into()),
-        border: Border::rounded(2),
+        border: border::rounded(2),
         ..Style::default()
     }
 }

widget/src/helpers.rs

@@ -921,7 +921,7 @@ where
         text("iced").size(text_size).font(Font::MONOSPACE)
     ]
     .spacing(text_size.0 / 3.0)
-    .align_items(Alignment::Center)
+    .align_y(Alignment::Center)
     .into()
 }
 

widget/src/overlay/menu.rs

@@ -1,5 +1,6 @@
 //! Build and show dropdown menus.
 use crate::core::alignment;
+use crate::core::border::{self, Border};
 use crate::core::event::{self, Event};
 use crate::core::layout::{self, Layout};
 use crate::core::mouse;
@@ -9,8 +10,8 @@ use crate::core::text::{self, Text};
 use crate::core::touch;
 use crate::core::widget::Tree;
 use crate::core::{
-    Background, Border, Clipboard, Color, Length, Padding, Pixels, Point,
-    Rectangle, Size, Theme, Vector,
+    Background, Clipboard, Color, Length, Padding, Pixels, Point, Rectangle,
+    Size, Theme, Vector,
 };
 use crate::core::{Element, Shell, Widget};
 use crate::scrollable::{self, Scrollable};
@@ -514,7 +515,7 @@ where
                             width: bounds.width - style.border.width * 2.0,
                             ..bounds
                         },
-                        border: Border::rounded(style.border.radius),
+                        border: border::rounded(style.border.radius),
                         ..renderer::Quad::default()
                     },
                     style.selected_background,

widget/src/progress_bar.rs

@@ -1,11 +1,11 @@
 //! Provide progress feedback to your users.
+use crate::core::border::{self, Border};
 use crate::core::layout;
 use crate::core::mouse;
 use crate::core::renderer;
 use crate::core::widget::Tree;
 use crate::core::{
-    self, Background, Border, Element, Layout, Length, Rectangle, Size, Theme,
-    Widget,
+    self, Background, Element, Layout, Length, Rectangle, Size, Theme, Widget,
 };
 
 use std::ops::RangeInclusive;
@@ -151,7 +151,7 @@ where
                         width: active_progress_width,
                         ..bounds
                     },
-                    border: Border::rounded(style.border.radius),
+                    border: border::rounded(style.border.radius),
                     ..renderer::Quad::default()
                 },
                 style.bar,
@@ -255,6 +255,6 @@ fn styled(
     Style {
         background: background.into(),
         bar: bar.into(),
-        border: Border::rounded(2),
+        border: border::rounded(2),
     }
 }

widget/src/radio.rs

@@ -1,5 +1,6 @@
 //! Create choices using radio buttons.
 use crate::core::alignment;
+use crate::core::border::{self, Border};
 use crate::core::event::{self, Event};
 use crate::core::layout;
 use crate::core::mouse;
@@ -9,8 +10,8 @@ use crate::core::touch;
 use crate::core::widget;
 use crate::core::widget::tree::{self, Tree};
 use crate::core::{
-    Background, Border, Clipboard, Color, Element, Layout, Length, Pixels,
-    Rectangle, Shell, Size, Theme, Widget,
+    Background, Clipboard, Color, Element, Layout, Length, Pixels, Rectangle,
+    Shell, Size, Theme, Widget,
 };
 
 /// A circular button representing a choice.
@@ -342,7 +343,7 @@ where
                             width: bounds.width - dot_size,
                             height: bounds.height - dot_size,
                         },
-                        border: Border::rounded(dot_size / 2.0),
+                        border: border::rounded(dot_size / 2.0),
                         ..renderer::Quad::default()
                     },
                     style.dot_color,

widget/src/row.rs

@@ -1,4 +1,5 @@
 //! Distribute content horizontally.
+use crate::core::alignment::{self, Alignment};
 use crate::core::event::{self, Event};
 use crate::core::layout::{self, Layout};
 use crate::core::mouse;
@@ -6,8 +7,8 @@ use crate::core::overlay;
 use crate::core::renderer;
 use crate::core::widget::{Operation, Tree};
 use crate::core::{
-    Alignment, Clipboard, Element, Length, Padding, Pixels, Rectangle, Shell,
-    Size, Vector, Widget,
+    Clipboard, Element, Length, Padding, Pixels, Rectangle, Shell, Size,
+    Vector, Widget,
 };
 
 /// A container that distributes its contents horizontally.
@@ -17,7 +18,7 @@ pub struct Row<'a, Message, Theme = crate::Theme, Renderer = crate::Renderer> {
     padding: Padding,
     width: Length,
     height: Length,
-    align_items: Alignment,
+    align: Alignment,
     clip: bool,
     children: Vec<Element<'a, Message, Theme, Renderer>>,
 }
@@ -60,7 +61,7 @@ where
             padding: Padding::ZERO,
             width: Length::Shrink,
             height: Length::Shrink,
-            align_items: Alignment::Start,
+            align: Alignment::Start,
             clip: false,
             children,
         }
@@ -95,8 +96,8 @@ where
     }
 
     /// Sets the vertical alignment of the contents of the [`Row`] .
-    pub fn align_items(mut self, align: Alignment) -> Self {
-        self.align_items = align;
+    pub fn align_y(mut self, align: impl Into<alignment::Vertical>) -> Self {
+        self.align = Alignment::from(align.into());
         self
     }
 
@@ -199,7 +200,7 @@ where
             self.height,
             self.padding,
             self.spacing,
-            self.align_items,
+            self.align,
             &self.children,
             &mut tree.children,
         )

widget/src/rule.rs

@@ -1,6 +1,6 @@
 //! Display a horizontal or vertical rule for dividing content.
 use crate::core;
-use crate::core::border::{self, Border};
+use crate::core::border;
 use crate::core::layout;
 use crate::core::mouse;
 use crate::core::renderer;
@@ -132,7 +132,7 @@ where
         renderer.fill_quad(
             renderer::Quad {
                 bounds,
-                border: Border::rounded(style.radius),
+                border: border::rounded(style.radius),
                 ..renderer::Quad::default()
             },
             style.color,

widget/src/scrollable.rs

@@ -1,5 +1,6 @@
 //! Navigate an endless amount of content with a scrollbar.
 use crate::container;
+use crate::core::border::{self, Border};
 use crate::core::event::{self, Event};
 use crate::core::keyboard;
 use crate::core::layout;
@@ -11,8 +12,8 @@ use crate::core::widget;
 use crate::core::widget::operation::{self, Operation};
 use crate::core::widget::tree::{self, Tree};
 use crate::core::{
-    self, Background, Border, Clipboard, Color, Element, Layout, Length,
-    Padding, Pixels, Point, Rectangle, Shell, Size, Theme, Vector, Widget,
+    self, Background, Clipboard, Color, Element, Layout, Length, Padding,
+    Pixels, Point, Rectangle, Shell, Size, Theme, Vector, Widget,
 };
 use crate::runtime::task::{self, Task};
 use crate::runtime::Action;
@@ -109,53 +110,70 @@ where
         self
     }
 
-    /// Sets the alignment of the horizontal direction of the [`Scrollable`], if applicable.
-    pub fn align_x(mut self, alignment: Alignment) -> Self {
+    /// Anchors the vertical [`Scrollable`] direction to the top.
+    pub fn anchor_top(self) -> Self {
+        self.anchor_y(Anchor::Start)
+    }
+
+    /// Anchors the vertical [`Scrollable`] direction to the bottom.
+    pub fn anchor_bottom(self) -> Self {
+        self.anchor_y(Anchor::End)
+    }
+
+    /// Anchors the horizontal [`Scrollable`] direction to the left.
+    pub fn anchor_left(self) -> Self {
+        self.anchor_x(Anchor::Start)
+    }
+
+    /// Anchors the horizontal [`Scrollable`] direction to the right.
+    pub fn anchor_right(self) -> Self {
+        self.anchor_x(Anchor::End)
+    }
+
+    /// Sets the [`Anchor`] of the horizontal direction of the [`Scrollable`], if applicable.
+    pub fn anchor_x(mut self, alignment: Anchor) -> Self {
         match &mut self.direction {
-            Direction::Horizontal(horizontal)
+            Direction::Horizontal {
+                scrollbar: horizontal,
+                ..
+            }
             | Direction::Both { horizontal, .. } => {
                 horizontal.alignment = alignment;
             }
-            Direction::Vertical(_) => {}
+            Direction::Vertical { .. } => {}
         }
 
         self
     }
 
-    /// Sets the alignment of the vertical direction of the [`Scrollable`], if applicable.
-    pub fn align_y(mut self, alignment: Alignment) -> Self {
+    /// Sets the [`Anchor`] of the vertical direction of the [`Scrollable`], if applicable.
+    pub fn anchor_y(mut self, alignment: Anchor) -> Self {
         match &mut self.direction {
-            Direction::Vertical(vertical)
+            Direction::Vertical {
+                scrollbar: vertical,
+                ..
+            }
             | Direction::Both { vertical, .. } => {
                 vertical.alignment = alignment;
             }
-            Direction::Horizontal(_) => {}
+            Direction::Horizontal { .. } => {}
         }
 
         self
     }
 
-    /// Sets whether the horizontal [`Scrollbar`] should be embedded in the [`Scrollable`].
-    pub fn embed_x(mut self, embedded: bool) -> Self {
+    /// Embeds the [`Scrollbar`] into the [`Scrollable`], instead of floating on top of the
+    /// content.
+    ///
+    /// The `spacing` provided will be used as space between the [`Scrollbar`] and the contents
+    /// of the [`Scrollable`].
+    pub fn spacing(mut self, new_spacing: impl Into<Pixels>) -> Self {
         match &mut self.direction {
-            Direction::Horizontal(horizontal)
-            | Direction::Both { horizontal, .. } => {
-                horizontal.embedded = embedded;
+            Direction::Horizontal { spacing, .. }
+            | Direction::Vertical { spacing, .. } => {
+                *spacing = Some(new_spacing.into().0);
             }
-            Direction::Vertical(_) => {}
-        }
-
-        self
-    }
-
-    /// Sets whether the vertical [`Scrollbar`] should be embedded in the [`Scrollable`].
-    pub fn embed_y(mut self, embedded: bool) -> Self {
-        match &mut self.direction {
-            Direction::Vertical(vertical)
-            | Direction::Both { vertical, .. } => {
-                vertical.embedded = embedded;
-            }
-            Direction::Horizontal(_) => {}
+            Direction::Both { .. } => {}
         }
 
         self
@@ -184,9 +202,19 @@ where
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub enum Direction {
     /// Vertical scrolling
-    Vertical(Scrollbar),
+    Vertical {
+        /// The vertical [`Scrollbar`].
+        scrollbar: Scrollbar,
+        /// The amount of spacing between the [`Scrollbar`] and the contents, if embedded.
+        spacing: Option<f32>,
+    },
     /// Horizontal scrolling
-    Horizontal(Scrollbar),
+    Horizontal {
+        /// The horizontal [`Scrollbar`].
+        scrollbar: Scrollbar,
+        /// The amount of spacing between the [`Scrollbar`] and the contents, if embedded.
+        spacing: Option<f32>,
+    },
     /// Both vertical and horizontal scrolling
     Both {
         /// The properties of the vertical scrollbar.
@@ -200,25 +228,28 @@ impl Direction {
     /// Returns the horizontal [`Scrollbar`], if any.
     pub fn horizontal(&self) -> Option<&Scrollbar> {
         match self {
-            Self::Horizontal(properties) => Some(properties),
+            Self::Horizontal { scrollbar, .. } => Some(scrollbar),
             Self::Both { horizontal, .. } => Some(horizontal),
-            Self::Vertical(_) => None,
+            Self::Vertical { .. } => None,
         }
     }
 
     /// Returns the vertical [`Scrollbar`], if any.
     pub fn vertical(&self) -> Option<&Scrollbar> {
         match self {
-            Self::Vertical(properties) => Some(properties),
+            Self::Vertical { scrollbar, .. } => Some(scrollbar),
             Self::Both { vertical, .. } => Some(vertical),
-            Self::Horizontal(_) => None,
+            Self::Horizontal { .. } => None,
         }
     }
 }
 
 impl Default for Direction {
     fn default() -> Self {
-        Self::Vertical(Scrollbar::default())
+        Self::Vertical {
+            scrollbar: Scrollbar::default(),
+            spacing: None,
+        }
     }
 }
 
@@ -228,8 +259,8 @@ pub struct Scrollbar {
     width: f32,
     margin: f32,
     scroller_width: f32,
-    alignment: Alignment,
-    embedded: bool,
+    alignment: Anchor,
+    spacing: Option<f32>,
 }
 
 impl Default for Scrollbar {
@@ -238,8 +269,8 @@ impl Default for Scrollbar {
             width: 10.0,
             margin: 0.0,
             scroller_width: 10.0,
-            alignment: Alignment::Start,
-            embedded: false,
+            alignment: Anchor::Start,
+            spacing: None,
         }
     }
 }
@@ -250,47 +281,49 @@ impl Scrollbar {
         Self::default()
     }
 
-    /// Sets the scrollbar width of the [`Scrollable`] .
+    /// Sets the scrollbar width of the [`Scrollbar`] .
     pub fn width(mut self, width: impl Into<Pixels>) -> Self {
         self.width = width.into().0.max(0.0);
         self
     }
 
-    /// Sets the scrollbar margin of the [`Scrollable`] .
+    /// Sets the scrollbar margin of the [`Scrollbar`] .
     pub fn margin(mut self, margin: impl Into<Pixels>) -> Self {
         self.margin = margin.into().0;
         self
     }
 
-    /// Sets the scroller width of the [`Scrollable`] .
+    /// Sets the scroller width of the [`Scrollbar`] .
     pub fn scroller_width(mut self, scroller_width: impl Into<Pixels>) -> Self {
         self.scroller_width = scroller_width.into().0.max(0.0);
         self
     }
 
-    /// Sets the alignment of the [`Scrollable`] .
-    pub fn alignment(mut self, alignment: Alignment) -> Self {
+    /// Sets the [`Anchor`] of the [`Scrollbar`] .
+    pub fn anchor(mut self, alignment: Anchor) -> Self {
         self.alignment = alignment;
         self
     }
 
-    /// Sets whether the [`Scrollbar`] should be embedded in the [`Scrollable`].
+    /// Sets whether the [`Scrollbar`] should be embedded in the [`Scrollable`], using
+    /// the given spacing between itself and the contents.
     ///
     /// An embedded [`Scrollbar`] will always be displayed, will take layout space,
     /// and will not float over the contents.
-    pub fn embedded(mut self, embedded: bool) -> Self {
-        self.embedded = embedded;
+    pub fn spacing(mut self, spacing: impl Into<Pixels>) -> Self {
+        self.spacing = Some(spacing.into().0);
         self
     }
 }
 
-/// Alignment of the scrollable's content relative to it's [`Viewport`] in one direction.
+/// The anchor of the scroller of the [`Scrollable`] relative to its [`Viewport`]
+/// on a given axis.
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
-pub enum Alignment {
-    /// Content is aligned to the start of the [`Viewport`].
+pub enum Anchor {
+    /// Scroller is anchoer to the start of the [`Viewport`].
     #[default]
     Start,
-    /// Content is aligned to the end of the [`Viewport`]
+    /// Content is aligned to the end of the [`Viewport`].
     End,
 }
 
@@ -330,12 +363,14 @@ where
         limits: &layout::Limits,
     ) -> layout::Node {
         let (right_padding, bottom_padding) = match self.direction {
-            Direction::Vertical(scrollbar) if scrollbar.embedded => {
-                (scrollbar.width + scrollbar.margin * 2.0, 0.0)
-            }
-            Direction::Horizontal(scrollbar) if scrollbar.embedded => {
-                (0.0, scrollbar.width + scrollbar.margin * 2.0)
-            }
+            Direction::Vertical {
+                scrollbar,
+                spacing: Some(spacing),
+            } => (scrollbar.width + scrollbar.margin * 2.0 + spacing, 0.0),
+            Direction::Horizontal {
+                scrollbar,
+                spacing: Some(spacing),
+            } => (0.0, scrollbar.width + scrollbar.margin * 2.0 + spacing),
             _ => (0.0, 0.0),
         };
 
@@ -1159,13 +1194,13 @@ impl Offset {
         self,
         viewport: f32,
         content: f32,
-        alignment: Alignment,
+        alignment: Anchor,
     ) -> f32 {
         let offset = self.absolute(viewport, content);
 
         match alignment {
-            Alignment::Start => offset,
-            Alignment::End => ((content - viewport).max(0.0) - offset).max(0.0),
+            Anchor::Start => offset,
+            Anchor::End => ((content - viewport).max(0.0) - offset).max(0.0),
         }
     }
 }
@@ -1252,9 +1287,9 @@ impl State {
             .map(|p| p.alignment)
             .unwrap_or_default();
 
-        let align = |alignment: Alignment, delta: f32| match alignment {
-            Alignment::Start => delta,
-            Alignment::End => -delta,
+        let align = |alignment: Anchor, delta: f32| match alignment {
+            Anchor::Start => delta,
+            Anchor::End => -delta,
         };
 
         let delta = Vector::new(
@@ -1385,11 +1420,11 @@ impl Scrollbars {
         let translation = state.translation(direction, bounds, content_bounds);
 
         let show_scrollbar_x = direction.horizontal().filter(|scrollbar| {
-            scrollbar.embedded || content_bounds.width > bounds.width
+            scrollbar.spacing.is_some() || content_bounds.width > bounds.width
         });
 
         let show_scrollbar_y = direction.vertical().filter(|scrollbar| {
-            scrollbar.embedded || content_bounds.height > bounds.height
+            scrollbar.spacing.is_some() || content_bounds.height > bounds.height
         });
 
         let y_scrollbar = if let Some(vertical) = show_scrollbar_y {
@@ -1592,14 +1627,14 @@ impl Scrollbars {
 pub(super) mod internals {
     use crate::core::{Point, Rectangle};
 
-    use super::Alignment;
+    use super::Anchor;
 
     #[derive(Debug, Copy, Clone)]
     pub struct Scrollbar {
         pub total_bounds: Rectangle,
         pub bounds: Rectangle,
         pub scroller: Option<Scroller>,
-        pub alignment: Alignment,
+        pub alignment: Anchor,
     }
 
     impl Scrollbar {
@@ -1621,8 +1656,8 @@ pub(super) mod internals {
                     / (self.bounds.height - scroller.bounds.height);
 
                 match self.alignment {
-                    Alignment::Start => percentage,
-                    Alignment::End => 1.0 - percentage,
+                    Anchor::Start => percentage,
+                    Anchor::End => 1.0 - percentage,
                 }
             } else {
                 0.0
@@ -1642,8 +1677,8 @@ pub(super) mod internals {
                     / (self.bounds.width - scroller.bounds.width);
 
                 match self.alignment {
-                    Alignment::Start => percentage,
-                    Alignment::End => 1.0 - percentage,
+                    Anchor::Start => percentage,
+                    Anchor::End => 1.0 - percentage,
                 }
             } else {
                 0.0
@@ -1746,10 +1781,10 @@ pub fn default(theme: &Theme, status: Status) -> Style {
 
     let scrollbar = Rail {
         background: Some(palette.background.weak.color.into()),
-        border: Border::rounded(2),
+        border: border::rounded(2),
         scroller: Scroller {
             color: palette.background.strong.color,
-            border: Border::rounded(2),
+            border: border::rounded(2),
         },
     };
 

widget/src/slider.rs

@@ -1,5 +1,5 @@
 //! Display an interactive selector of a single value from a range of values.
-use crate::core::border;
+use crate::core::border::{self, Border};
 use crate::core::event::{self, Event};
 use crate::core::keyboard;
 use crate::core::keyboard::key::{self, Key};
@@ -9,8 +9,8 @@ use crate::core::renderer;
 use crate::core::touch;
 use crate::core::widget::tree::{self, Tree};
 use crate::core::{
-    self, Border, Clipboard, Color, Element, Layout, Length, Pixels, Point,
-    Rectangle, Shell, Size, Theme, Widget,
+    self, Clipboard, Color, Element, Layout, Length, Pixels, Point, Rectangle,
+    Shell, Size, Theme, Widget,
 };
 
 use std::ops::RangeInclusive;
@@ -408,7 +408,7 @@ where
                     width: offset + handle_width / 2.0,
                     height: style.rail.width,
                 },
-                border: Border::rounded(style.rail.border_radius),
+                border: border::rounded(style.rail.border_radius),
                 ..renderer::Quad::default()
             },
             style.rail.colors.0,
@@ -422,7 +422,7 @@ where
                     width: bounds.width - offset - handle_width / 2.0,
                     height: style.rail.width,
                 },
-                border: Border::rounded(style.rail.border_radius),
+                border: border::rounded(style.rail.border_radius),
                 ..renderer::Quad::default()
             },
             style.rail.colors.1,

widget/src/vertical_slider.rs

@@ -5,6 +5,7 @@ pub use crate::slider::{
     default, Catalog, Handle, HandleShape, Status, Style, StyleFn,
 };
 
+use crate::core::border::{self, Border};
 use crate::core::event::{self, Event};
 use crate::core::keyboard;
 use crate::core::keyboard::key::{self, Key};
@@ -14,8 +15,8 @@ use crate::core::renderer;
 use crate::core::touch;
 use crate::core::widget::tree::{self, Tree};
 use crate::core::{
-    self, Border, Clipboard, Element, Length, Pixels, Point, Rectangle, Shell,
-    Size, Widget,
+    self, Clipboard, Element, Length, Pixels, Point, Rectangle, Shell, Size,
+    Widget,
 };
 
 /// An vertical bar and a handle that selects a single value from a range of
@@ -412,7 +413,7 @@ where
                     width: style.rail.width,
                     height: offset + handle_width / 2.0,
                 },
-                border: Border::rounded(style.rail.border_radius),
+                border: border::rounded(style.rail.border_radius),
                 ..renderer::Quad::default()
             },
             style.rail.colors.1,
@@ -426,7 +427,7 @@ where
                     width: style.rail.width,
                     height: bounds.height - offset - handle_width / 2.0,
                 },
-                border: Border::rounded(style.rail.border_radius),
+                border: border::rounded(style.rail.border_radius),
                 ..renderer::Quad::default()
             },
             style.rail.colors.0,