diff --git a/crates/bevy_ui/src/flex/convert.rs b/crates/bevy_ui/src/flex/convert.rs
index c60feb97cd591..26ec0a06e3625 100644
--- a/crates/bevy_ui/src/flex/convert.rs
+++ b/crates/bevy_ui/src/flex/convert.rs
@@ -1,7 +1,14 @@
 use crate::{
-    AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, JustifyContent,
-    PositionType, Size, Style, UiRect, Val,
+    layout_components::{
+        flex::{
+            AlignContent, AlignItems, AlignSelf, Direction, FlexLayoutQueryItem, JustifyContent,
+            Wrap,
+        },
+        Position,
+    },
+    Display,
 };
+use crate::{Size, UiRect, Val};
 
 pub fn from_rect(
     scale_factor: f64,
@@ -32,28 +39,28 @@ pub fn from_val_size(
     }
 }
 
-pub fn from_style(scale_factor: f64, value: &Style) -> taffy::style::Style {
+pub fn from_flex_layout(scale_factor: f64, value: FlexLayoutQueryItem<'_>) -> taffy::style::Style {
     taffy::style::Style {
-        display: value.display.into(),
-        position_type: value.position_type.into(),
-        flex_direction: value.flex_direction.into(),
-        flex_wrap: value.flex_wrap.into(),
-        align_items: value.align_items.into(),
-        align_self: value.align_self.into(),
-        align_content: value.align_content.into(),
-        justify_content: value.justify_content.into(),
-        position: from_rect(scale_factor, value.position),
-        margin: from_rect(scale_factor, value.margin),
-        padding: from_rect(scale_factor, value.padding),
-        border: from_rect(scale_factor, value.border),
-        flex_grow: value.flex_grow,
-        flex_shrink: value.flex_shrink,
-        flex_basis: from_val(scale_factor, value.flex_basis),
-        size: from_val_size(scale_factor, value.size),
-        min_size: from_val_size(scale_factor, value.min_size),
-        max_size: from_val_size(scale_factor, value.max_size),
-        aspect_ratio: value.aspect_ratio,
-        gap: from_val_size(scale_factor, value.gap),
+        display: (value.control.display).into(),
+        position_type: (value.control.position).into(),
+        flex_direction: value.layout.direction.into(),
+        flex_wrap: value.layout.wrap.into(),
+        align_items: value.layout.align_items.into(),
+        align_self: value.child_layout.align_self.into(),
+        align_content: value.layout.align_content.into(),
+        justify_content: value.layout.justify_content.into(),
+        position: from_rect(scale_factor, value.control.inset.0),
+        margin: from_rect(scale_factor, value.spacing.margin),
+        padding: from_rect(scale_factor, value.spacing.padding),
+        border: from_rect(scale_factor, value.spacing.border),
+        flex_grow: value.child_layout.grow,
+        flex_shrink: value.child_layout.shrink,
+        flex_basis: from_val(scale_factor, value.child_layout.basis),
+        size: from_val_size(scale_factor, value.size_constraints.suggested),
+        min_size: from_val_size(scale_factor, value.size_constraints.min),
+        max_size: from_val_size(scale_factor, value.size_constraints.max),
+        aspect_ratio: value.size_constraints.aspect_ratio,
+        gap: from_val_size(scale_factor, value.layout.gap),
     }
 }
 
@@ -122,13 +129,13 @@ impl From<Display> for taffy::style::Display {
     }
 }
 
-impl From<FlexDirection> for taffy::style::FlexDirection {
-    fn from(value: FlexDirection) -> Self {
+impl From<Direction> for taffy::style::FlexDirection {
+    fn from(value: Direction) -> Self {
         match value {
-            FlexDirection::Row => taffy::style::FlexDirection::Row,
-            FlexDirection::Column => taffy::style::FlexDirection::Column,
-            FlexDirection::RowReverse => taffy::style::FlexDirection::RowReverse,
-            FlexDirection::ColumnReverse => taffy::style::FlexDirection::ColumnReverse,
+            Direction::Row => taffy::style::FlexDirection::Row,
+            Direction::Column => taffy::style::FlexDirection::Column,
+            Direction::RowReverse => taffy::style::FlexDirection::RowReverse,
+            Direction::ColumnReverse => taffy::style::FlexDirection::ColumnReverse,
         }
     }
 }
@@ -146,21 +153,21 @@ impl From<JustifyContent> for taffy::style::JustifyContent {
     }
 }
 
-impl From<PositionType> for taffy::style::PositionType {
-    fn from(value: PositionType) -> Self {
+impl From<Position> for taffy::style::PositionType {
+    fn from(value: Position) -> Self {
         match value {
-            PositionType::Relative => taffy::style::PositionType::Relative,
-            PositionType::Absolute => taffy::style::PositionType::Absolute,
+            Position::Relative => taffy::style::PositionType::Relative,
+            Position::Absolute => taffy::style::PositionType::Absolute,
         }
     }
 }
 
-impl From<FlexWrap> for taffy::style::FlexWrap {
-    fn from(value: FlexWrap) -> Self {
+impl From<Wrap> for taffy::style::FlexWrap {
+    fn from(value: Wrap) -> Self {
         match value {
-            FlexWrap::NoWrap => taffy::style::FlexWrap::NoWrap,
-            FlexWrap::Wrap => taffy::style::FlexWrap::Wrap,
-            FlexWrap::WrapReverse => taffy::style::FlexWrap::WrapReverse,
+            Wrap::NoWrap => taffy::style::FlexWrap::NoWrap,
+            Wrap::Wrap => taffy::style::FlexWrap::Wrap,
+            Wrap::WrapReverse => taffy::style::FlexWrap::WrapReverse,
         }
     }
 }
diff --git a/crates/bevy_ui/src/flex/mod.rs b/crates/bevy_ui/src/flex/mod.rs
index 8f058dd5887ae..3c336f5fdf998 100644
--- a/crates/bevy_ui/src/flex/mod.rs
+++ b/crates/bevy_ui/src/flex/mod.rs
@@ -1,6 +1,9 @@
 mod convert;
 
-use crate::{CalculatedSize, Node, Style, UiScale};
+use crate::{
+    layout_components::flex::{FlexLayoutChanged, FlexLayoutQuery, FlexLayoutQueryItem},
+    CalculatedSize, Node, UiScale,
+};
 use bevy_ecs::{
     change_detection::DetectChanges,
     entity::Entity,
@@ -60,10 +63,17 @@ impl Default for FlexSurface {
 }
 
 impl FlexSurface {
-    pub fn upsert_node(&mut self, entity: Entity, style: &Style, scale_factor: f64) {
+    /// Inserts the node into the hashmap if they don't already exist,
+    /// or update the contents if they already to exist.
+    pub fn upsert_node(
+        &mut self,
+        entity: Entity,
+        layout: FlexLayoutQueryItem<'_>,
+        scale_factor: f64,
+    ) {
         let mut added = false;
         let taffy = &mut self.taffy;
-        let taffy_style = convert::from_style(scale_factor, style);
+        let taffy_style = convert::from_flex_layout(scale_factor, layout);
         let taffy_node = self.entity_to_taffy.entry(entity).or_insert_with(|| {
             added = true;
             taffy.new_leaf(taffy_style).unwrap()
@@ -77,12 +87,12 @@ impl FlexSurface {
     pub fn upsert_leaf(
         &mut self,
         entity: Entity,
-        style: &Style,
+        layout: FlexLayoutQueryItem<'_>,
         calculated_size: CalculatedSize,
         scale_factor: f64,
     ) {
         let taffy = &mut self.taffy;
-        let taffy_style = convert::from_style(scale_factor, style);
+        let taffy_style = convert::from_flex_layout(scale_factor, layout);
         let measure = taffy::node::MeasureFunc::Boxed(Box::new(
             move |constraints: Size<Option<f32>>, _available: Size<AvailableSpace>| {
                 let mut size = convert::from_f32_size(scale_factor, calculated_size.size);
@@ -227,10 +237,13 @@ pub fn flex_node_system(
     mut scale_factor_events: EventReader<WindowScaleFactorChanged>,
     mut flex_surface: ResMut<FlexSurface>,
     root_node_query: Query<Entity, (With<Node>, Without<Parent>)>,
-    node_query: Query<(Entity, &Style, Option<&CalculatedSize>), (With<Node>, Changed<Style>)>,
-    full_node_query: Query<(Entity, &Style, Option<&CalculatedSize>), With<Node>>,
+    node_query: Query<
+        (Entity, FlexLayoutQuery, Option<&CalculatedSize>),
+        (With<Node>, FlexLayoutChanged),
+    >,
+    full_node_query: Query<(Entity, FlexLayoutQuery, Option<&CalculatedSize>), With<Node>>,
     changed_size_query: Query<
-        (Entity, &Style, &CalculatedSize),
+        (Entity, FlexLayoutQuery, &CalculatedSize),
         (With<Node>, Changed<CalculatedSize>),
     >,
     children_query: Query<(Entity, &Children), (With<Node>, Changed<Children>)>,
@@ -257,15 +270,15 @@ pub fn flex_node_system(
     fn update_changed<F: ReadOnlyWorldQuery>(
         flex_surface: &mut FlexSurface,
         scaling_factor: f64,
-        query: Query<(Entity, &Style, Option<&CalculatedSize>), F>,
+        query: Query<(Entity, FlexLayoutQuery, Option<&CalculatedSize>), F>,
     ) {
         // update changed nodes
-        for (entity, style, calculated_size) in &query {
+        for (entity, layout, calculated_size) in &query {
             // TODO: remove node from old hierarchy if its root has changed
             if let Some(calculated_size) = calculated_size {
-                flex_surface.upsert_leaf(entity, style, *calculated_size, scaling_factor);
+                flex_surface.upsert_leaf(entity, layout, *calculated_size, scaling_factor);
             } else {
-                flex_surface.upsert_node(entity, style, scaling_factor);
+                flex_surface.upsert_node(entity, layout, scaling_factor);
             }
         }
     }
@@ -276,8 +289,8 @@ pub fn flex_node_system(
         update_changed(&mut flex_surface, scale_factor, node_query);
     }
 
-    for (entity, style, calculated_size) in &changed_size_query {
-        flex_surface.upsert_leaf(entity, style, *calculated_size, scale_factor);
+    for (entity, layout, calculated_size) in &changed_size_query {
+        flex_surface.upsert_leaf(entity, layout, *calculated_size, scale_factor);
     }
 
     // clean up removed nodes
diff --git a/crates/bevy_ui/src/focus.rs b/crates/bevy_ui/src/focus.rs
index c2fce0c2996cd..96da391f8b917 100644
--- a/crates/bevy_ui/src/focus.rs
+++ b/crates/bevy_ui/src/focus.rs
@@ -30,7 +30,7 @@ use smallvec::SmallVec;
 /// This ensures that hidden UI nodes are not interactable,
 /// and do not end up stuck in an active state if hidden at the wrong time.
 ///
-/// Note that you can also control the visibility of a node using the [`Display`](crate::ui_node::Display) property,
+/// Note that you can also control the visibility of a node using the [`Display`](crate::layout_components::Display) property,
 /// which fully collapses it during layout calculations.
 #[derive(Component, Copy, Clone, Eq, PartialEq, Debug, Reflect, Serialize, Deserialize)]
 #[reflect(Component, Serialize, Deserialize, PartialEq)]
diff --git a/crates/bevy_ui/src/geometry.rs b/crates/bevy_ui/src/geometry.rs
index 42eaa5651c665..2753adfab5904 100644
--- a/crates/bevy_ui/src/geometry.rs
+++ b/crates/bevy_ui/src/geometry.rs
@@ -1,8 +1,9 @@
 use crate::Val;
 use bevy_reflect::Reflect;
+use serde::{Deserialize, Serialize};
 use std::ops::{Div, DivAssign, Mul, MulAssign};
 
-/// A type which is commonly used to define positions, margins, paddings and borders.
+/// A type which is commonly used throughout UI and layouting, commonly used to define inset, margins, paddings and borders.
 ///
 /// # Examples
 ///
@@ -65,61 +66,17 @@ use std::ops::{Div, DivAssign, Mul, MulAssign};
 /// right values of the position because the size of the UI element is already explicitly specified.
 ///
 /// ```
-/// # use bevy_ui::{UiRect, Size, Val, Style};
+/// # use bevy_ui::{UiRect, Size, Val, SizeConstraints, Inset};
 /// # use bevy_utils::default;
 /// #
-/// let style = Style {
-///     position: UiRect { // Defining all four sides
-///         left: Val::Px(100.0),
-///         right: Val::Px(200.0),
-///         top: Val::Px(300.0),
-///         bottom: Val::Px(400.0),
-///     },
-///     size: Size::new(Val::Percent(100.0), Val::Percent(50.0)), // but also explicitly specifying a size
-///     ..default()
-/// };
-/// ```
-///
-/// ## Margin
-///
-/// A margin is used to create space around UI elements, outside of any defined borders.
-///
-/// ```
-/// # use bevy_ui::{UiRect, Val};
-/// #
-/// let margin = UiRect::all(Val::Auto); // Centers the UI element
-/// ```
-///
-/// ## Padding
-///
-/// A padding is used to create space around UI elements, inside of any defined borders.
-///
-/// ```
-/// # use bevy_ui::{UiRect, Val};
-/// #
-/// let padding = UiRect {
-///     left: Val::Px(10.0),
-///     right: Val::Px(20.0),
-///     top: Val::Px(30.0),
-///     bottom: Val::Px(40.0),
-/// };
-/// ```
-///
-/// ## Borders
-///
-/// A border is used to define the width of the border of a UI element.
+/// let inset = Inset(UiRect {
+///     left: Val::Px(100.0),
+///     right: Val::Px(200.0),
+///     top: Val::Px(300.0),
+///     bottom: Val::Px(400.0),
+/// });
 ///
-/// ```
-/// # use bevy_ui::{UiRect, Val};
-/// #
-/// let border = UiRect {
-///     left: Val::Px(10.0),
-///     right: Val::Px(20.0),
-///     top: Val::Px(30.0),
-///     bottom: Val::Px(40.0),
-/// };
-/// ```
-#[derive(Copy, Clone, PartialEq, Debug, Reflect)]
+#[derive(Copy, Clone, PartialEq, Debug, Reflect, Serialize, Deserialize)]
 #[reflect(PartialEq)]
 pub struct UiRect {
     /// The value corresponding to the left side of the UI rect.
@@ -133,13 +90,6 @@ pub struct UiRect {
 }
 
 impl UiRect {
-    pub const DEFAULT: Self = Self {
-        left: Val::DEFAULT,
-        right: Val::DEFAULT,
-        top: Val::DEFAULT,
-        bottom: Val::DEFAULT,
-    };
-
     /// Creates a new [`UiRect`] from the values specified.
     ///
     /// # Example
@@ -318,6 +268,15 @@ impl UiRect {
             ..Default::default()
         }
     }
+
+    /// Alias of [`UiRect::UNDEFINED`]
+    pub const DEFAULT: UiRect = UiRect::UNDEFINED;
+
+    /// Creates a [`UiRect`] where all sides are [`Val::Undefined`]
+    pub const UNDEFINED: UiRect = UiRect::all(Val::Undefined);
+
+    /// Creates a [`UiRect`] where all sides are [`Val::Auto`]
+    pub const AUTO: UiRect = UiRect::all(Val::Auto);
 }
 
 impl Default for UiRect {
@@ -329,7 +288,7 @@ impl Default for UiRect {
 /// A 2-dimensional area defined by a width and height.
 ///
 /// It is commonly used to define the size of a text or UI element.
-#[derive(Copy, Clone, PartialEq, Debug, Reflect)]
+#[derive(Copy, Clone, PartialEq, Debug, Reflect, Serialize, Deserialize)]
 #[reflect(PartialEq)]
 pub struct Size {
     /// The width of the 2-dimensional area.
@@ -339,11 +298,6 @@ pub struct Size {
 }
 
 impl Size {
-    pub const DEFAULT: Self = Self {
-        width: Val::DEFAULT,
-        height: Val::DEFAULT,
-    };
-
     /// Creates a new [`Size`] from a width and a height.
     ///
     /// # Example
@@ -360,17 +314,42 @@ impl Size {
         Size { width, height }
     }
 
-    /// Creates a Size where both values are [`Val::Auto`].
+    /// Creates a new [`Size`] where both values are given in [`Val::Px`].
+    pub const fn px(width: f32, height: f32) -> Self {
+        Size {
+            width: Val::Px(width),
+            height: Val::Px(height),
+        }
+    }
+
+    /// Creates a new [`Size`] where both values are given in [`Val::Percent`].
+    pub const fn percent(width: f32, height: f32) -> Self {
+        Size {
+            width: Val::Percent(width),
+            height: Val::Percent(height),
+        }
+    }
+
+    /// Alias of [`Size::UNDEFINED`]
+    pub const DEFAULT: Size = Size::UNDEFINED;
+
+    /// Creates a new [`Size`] where both values are [`Val::Auto`].
     pub const AUTO: Size = Size {
         width: Val::Auto,
         height: Val::Auto,
     };
 
-    /// Creates a Size where both values are [`Val::Undefined`].
+    /// Creates a new [`Size`] where both values are [`Val::Undefined`].
     pub const UNDEFINED: Size = Size {
         width: Val::Undefined,
         height: Val::Undefined,
     };
+
+    /// Creates a new [`Size`] where both values are 100 percent.
+    pub const FULL: Size = Size {
+        width: Val::FULL,
+        height: Val::FULL,
+    };
 }
 
 impl Default for Size {
diff --git a/crates/bevy_ui/src/layout_components.rs b/crates/bevy_ui/src/layout_components.rs
new file mode 100644
index 0000000000000..b1224bfd6c7a7
--- /dev/null
+++ b/crates/bevy_ui/src/layout_components.rs
@@ -0,0 +1,561 @@
+//! Components used to control the layout of UI-[`Node`](super::Node) entities.
+use crate::{Size, UiRect, Val};
+use bevy_derive::{Deref, DerefMut};
+use bevy_ecs::prelude::Component;
+use bevy_reflect::prelude::*;
+use serde::{Deserialize, Serialize};
+
+/// Grouping of core control parameter of the layout for this node.
+#[derive(Component, Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub struct LayoutControl {
+    /// Defines how the node will partake in the layouting.
+    pub display: Display,
+    /// The strategy used to position this node.
+    pub position: Position,
+    /// The inset of this UI node, relative to its default position
+    pub inset: Inset,
+    /// The behavior in case the node overflows its allocated space
+    pub overflow: Overflow,
+}
+
+impl LayoutControl {
+    pub const DEFAULT: Self = Self {
+        display: Display::DEFAULT,
+        position: Position::DEFAULT,
+        inset: Inset::DEFAULT,
+        overflow: Overflow::DEFAULT,
+    };
+}
+impl Default for LayoutControl {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+/// Defines how the node will partake in the layouting.
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect(PartialEq, Serialize, Deserialize)]
+pub enum Display {
+    /// Use Flexbox layout model to determine the position of this [`Node`](crate::ui_node::Node).
+    Flex,
+    /// The node is completely removed from layouting.
+    ///
+    /// The final layout will be calculated as if this node never existed.
+    /// If you want to hide a node and its children, but keep its layout in place,
+    /// set its [`Visibility`](bevy_render::view::Visibility) component instead.
+    None,
+}
+impl Display {
+    pub const DEFAULT: Self = Self::Flex;
+}
+impl Default for Display {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+/// The strategy used to position this node.
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect_value(PartialEq, Serialize, Deserialize)]
+pub enum Position {
+    /// Positioned in relation to its parent, while considering all sibling-nodes that also have the [`Position::Relative`] value.
+    Relative,
+    /// Positioned in relation to its parent, without considering any sibling nodes.
+    Absolute,
+}
+impl Position {
+    pub const DEFAULT: Self = Self::Relative;
+}
+
+impl Default for Position {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+/// The inset of a UI node from its base position.
+///
+/// `Inset` is the shorthand for the CSS properties `top`, `bottom`, `left`, `right`.
+/// It sets the distance between an element and its parent element.
+///
+/// To check the final position of a UI element, read its [`Transform`](bevy_transform::components::Transform) component.
+#[derive(Deref, DerefMut, Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect_value(PartialEq, Serialize, Deserialize)]
+pub struct Inset(pub UiRect);
+impl Inset {
+    pub const DEFAULT: Self = Self(UiRect::DEFAULT);
+}
+
+impl Default for Inset {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+/// Controls the size of UI nodes
+///
+/// Layouting is performed by the Flexbox layout algorithm where the value of [`SizeConstraints`] is considered.
+/// To check the actual size of a UI element, read its [`Transform`](bevy_transform::components::Transform) component
+#[derive(Component, Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect_value(PartialEq, Serialize, Deserialize)]
+pub struct SizeConstraints {
+    /// The minimum extent, which cannot be violated by the layouting algorithm.
+    ///
+    /// Minimum extents override maximums.
+    /// That is: if an extent's calculated maximum is less than its calculated minimum then the maximum extent will be ignored.
+    pub min: Size,
+    /// The suggested extent, which will be used if other constraints can be resolved.
+    pub suggested: Size,
+    /// The maximum extent, which cannot be violated by the layouting algorithm except when overridden by the minimum extent.
+    pub max: Size,
+    /// The expected aspect ratio, computed as width / height.
+    pub aspect_ratio: Option<f32>,
+}
+
+impl SizeConstraints {
+    /// Creates a new [`SizeConstraints`] with all values set to default.
+    pub const DEFAULT: SizeConstraints = SizeConstraints {
+        min: Size::DEFAULT,
+        suggested: Size::DEFAULT,
+        max: Size::DEFAULT,
+        aspect_ratio: None,
+    };
+
+    /// Creates a new [`SizeConstraints`] with both `max` and `suggested` constraints set to the largest possible extent (100%).
+    pub const FILL_PARENT: SizeConstraints = SizeConstraints {
+        min: Size::DEFAULT,
+        suggested: Size::FULL,
+        max: Size::FULL,
+        aspect_ratio: None,
+    };
+
+    /// Creates a new [`SizeConstraints`] with the `min`-constraint set to the given values.
+    pub const fn min(width: Val, height: Val) -> SizeConstraints {
+        SizeConstraints {
+            min: Size::new(width, height),
+            ..Self::DEFAULT
+        }
+    }
+
+    /// Creates a new [`SizeConstraints`] with the `suggested`-constraint set to the given values.
+    pub const fn suggested(width: Val, height: Val) -> SizeConstraints {
+        SizeConstraints {
+            suggested: Size::new(width, height),
+            ..Self::DEFAULT
+        }
+    }
+
+    /// Creates a new [`SizeConstraints`] with the `max`-constraint set to the given values.
+    pub const fn max(width: Val, height: Val) -> SizeConstraints {
+        SizeConstraints {
+            max: Size::new(width, height),
+            ..Self::DEFAULT
+        }
+    }
+}
+
+impl Default for SizeConstraints {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+/// The space around and inside of a UI node
+///
+/// ## Margin
+///
+/// A margin is used to create space around UI elements, outside of any defined borders.
+///
+/// ```
+/// # use bevy_ui::{UiRect, Val, Spacing};
+/// #
+/// let margin = Spacing::margin(UiRect {
+///     left: Val::Px(30.0),
+///     right: Val::Px(25.0),
+///     top: Val::Px(10.0),
+///     bottom: Val::Px(20.0),
+/// });
+/// ```
+///
+/// ## Padding
+///
+/// A padding is used to create space around UI elements, inside of any defined borders.
+///
+/// ```
+/// # use bevy_ui::{UiRect, Val, Spacing};
+/// #
+/// let padding = Spacing::padding(UiRect {
+///     left: Val::Px(10.0),
+///     right: Val::Px(20.0),
+///     top: Val::Px(30.0),
+///     bottom: Val::Px(40.0),
+/// });
+/// ```
+///
+/// ## Borders
+///
+/// A border is used to define the width of the border of a UI element.
+///
+/// ```
+/// # use bevy_ui::{UiRect, Val, Spacing};
+/// #
+/// let border = Spacing::border(UiRect {
+///     left: Val::Px(10.0),
+///     right: Val::Px(20.0),
+///     top: Val::Px(30.0),
+///     bottom: Val::Px(40.0),
+/// });
+/// ```
+#[derive(Component, Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect)]
+#[reflect_value(PartialEq, Serialize, Deserialize)]
+pub struct Spacing {
+    /// The space around the outside of the UI element
+    pub margin: UiRect,
+    /// The space around the inside of the UI element
+    pub padding: UiRect,
+    /// The space around the outside of the UI element that can be colored to create a visible border
+    pub border: UiRect,
+}
+
+impl Default for Spacing {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+impl Spacing {
+    /// Creates a [`Spacing`] with default values in all fields.
+    pub const DEFAULT: Spacing = Spacing {
+        margin: UiRect::DEFAULT,
+        padding: UiRect::DEFAULT,
+        border: UiRect::DEFAULT,
+    };
+
+    /// Creates a [`Spacing`] with [`Val::Auto`] `margin` on all sides.
+    pub const AUTO_MARGIN: Spacing = Spacing::margin_all(Val::Auto);
+
+    /// Creates a [`Spacing`] with [`Val::Auto`] `padding` on all sides.
+    pub const AUTO_PADDING: Spacing = Spacing::padding_all(Val::Auto);
+
+    /// Creates a [`Spacing`] with a `margin` of the given size.
+    pub const fn margin(rect: UiRect) -> Spacing {
+        Spacing {
+            margin: rect,
+            ..Self::DEFAULT
+        }
+    }
+
+    /// Creates a [`Spacing`] where all sides of the `margin` is of the given value.
+    pub const fn margin_all(val: Val) -> Spacing {
+        Spacing {
+            margin: UiRect::all(val),
+            ..Self::DEFAULT
+        }
+    }
+
+    /// Creates a [`Spacing`] with a `padding` of the given size.
+    pub const fn padding(rect: UiRect) -> Spacing {
+        Spacing {
+            padding: rect,
+            ..Self::DEFAULT
+        }
+    }
+
+    /// Creates a [`Spacing`] where all sides of the `padding` is of the given value.
+    pub const fn padding_all(val: Val) -> Spacing {
+        Spacing {
+            padding: UiRect::all(val),
+            ..Self::DEFAULT
+        }
+    }
+
+    /// Creates a [`Spacing`] with a `border` of the given size.
+    pub const fn border(rect: UiRect) -> Spacing {
+        Spacing {
+            border: rect,
+            ..Self::DEFAULT
+        }
+    }
+
+    /// Creates a [`Spacing`] where all sides of the `border` is of the given value.
+    pub const fn border_all(val: Val) -> Spacing {
+        Spacing {
+            border: UiRect::all(val),
+            ..Self::DEFAULT
+        }
+    }
+}
+
+/// Whether to show or hide overflowing items
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect, Serialize, Deserialize)]
+#[reflect_value(PartialEq, Serialize, Deserialize)]
+pub enum Overflow {
+    /// Show overflowing items
+    Visible,
+    /// Hide overflowing items
+    Hidden,
+}
+impl Overflow {
+    pub const DEFAULT: Self = Self::Visible;
+}
+
+impl Default for Overflow {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+/// Flexbox-specific layout components
+pub mod flex {
+
+    use bevy_ecs::query::{Changed, Or, WorldQuery};
+
+    use super::*;
+
+    /// A query for all of the components need for flexbox layout.
+    ///
+    /// See [`FlexLayoutChanged`] when attempting to use this as a query filter.
+    #[derive(WorldQuery)]
+    pub struct FlexLayoutQuery {
+        pub control: &'static LayoutControl,
+        /// Defines how this node's layout should be.
+        pub layout: &'static FlexContainer,
+        /// Defines how  this node should behave as a child of a node.
+        pub child_layout: &'static FlexItem,
+        /// The constraints on the size of this node
+        pub size_constraints: &'static SizeConstraints,
+        /// The margin, padding and border of the UI node
+        pub spacing: &'static Spacing,
+    }
+
+    /// A type alias for when any of the components in a [`FlexLayoutQuery`] have changed.
+    pub type FlexLayoutChanged = Or<(
+        Changed<LayoutControl>,
+        Changed<FlexContainer>,
+        Changed<FlexItem>,
+        Changed<SizeConstraints>,
+        Changed<Spacing>,
+    )>;
+
+    /// The flexbox-specific layout configuration of a UI node
+    ///
+    /// This follows the web spec closely,
+    /// you can use [guides](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for additional documentation.
+    #[derive(Component, Serialize, Deserialize, Reflect, Debug, PartialEq, Clone, Copy)]
+    #[reflect_value(PartialEq, Serialize, Deserialize)]
+    pub struct FlexContainer {
+        /// How items are ordered inside a flexbox
+        ///
+        /// Sets the main and cross-axis: if this is a "row" variant, the main axis will be rows.
+        pub direction: Direction,
+        /// Aligns this container's contents according to the cross-axis
+        pub align_items: AlignItems,
+        /// Aligns this containers lines according to the cross-axis
+        pub align_content: AlignContent,
+        /// Aligns this containers items along the main-axis
+        pub justify_content: JustifyContent,
+        /// Controls how the content wraps
+        pub wrap: Wrap,
+        /// The size of the gutters between the rows and columns of the flexbox layout.
+        ///
+        /// Values of `Size::UNDEFINED` and `Size::AUTO` are treated as zero.
+        pub gap: Size,
+    }
+    impl FlexContainer {
+        pub const DEFAULT: Self = Self {
+            direction: Direction::DEFAULT,
+            align_items: AlignItems::DEFAULT,
+            align_content: AlignContent::DEFAULT,
+            justify_content: JustifyContent::DEFAULT,
+            wrap: Wrap::DEFAULT,
+            gap: Size::DEFAULT,
+        };
+    }
+    impl Default for FlexContainer {
+        fn default() -> Self {
+            Self::DEFAULT
+        }
+    }
+
+    /// Defines how this node should behave as a child of a parent node.
+    #[derive(Component, Serialize, Deserialize, Reflect, Debug, PartialEq, Clone, Copy)]
+    #[reflect_value(PartialEq, Serialize, Deserialize)]
+    pub struct FlexItem {
+        /// Overrides the inherited [`AlignItems`] value for this node
+        pub align_self: AlignSelf,
+        /// Defines how much a flexbox item should grow if there's space available
+        pub grow: f32,
+        /// How to shrink if there's not enough space available
+        pub shrink: f32,
+        /// The initial size of the item
+        pub basis: Val,
+    }
+    impl FlexItem {
+        pub const DEFAULT: Self = Self {
+            align_self: AlignSelf::DEFAULT,
+            grow: 0.0,
+            shrink: 1.0,
+            basis: Val::DEFAULT,
+        };
+    }
+    impl Default for FlexItem {
+        fn default() -> Self {
+            FlexItem::DEFAULT
+        }
+    }
+
+    /// Defines how flexbox items are ordered within a flexbox
+    #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+    #[reflect_value(PartialEq, Serialize, Deserialize)]
+    pub enum Direction {
+        /// Same way as text direction along the main axis
+        Row,
+        /// Flex from bottom to top
+        Column,
+        /// Opposite way as text direction along the main axis
+        RowReverse,
+        /// Flex from top to bottom
+        ColumnReverse,
+    }
+    impl Direction {
+        pub const DEFAULT: Self = Self::Row;
+    }
+
+    impl Default for Direction {
+        fn default() -> Self {
+            Self::DEFAULT
+        }
+    }
+
+    /// How items are aligned according to the cross axis
+    #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+    #[reflect_value(PartialEq, Serialize, Deserialize)]
+    pub enum AlignItems {
+        /// Items are aligned at the start
+        FlexStart,
+        /// Items are aligned at the end
+        FlexEnd,
+        /// Items are aligned at the center
+        Center,
+        /// Items are aligned at the baseline
+        Baseline,
+        /// Items are stretched across the whole cross axis
+        Stretch,
+    }
+    impl AlignItems {
+        pub const DEFAULT: Self = Self::Stretch;
+    }
+
+    impl Default for AlignItems {
+        fn default() -> Self {
+            Self::DEFAULT
+        }
+    }
+
+    /// Works like [`AlignItems`] but applies only to a single item
+    #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+    #[reflect_value(PartialEq, Serialize, Deserialize)]
+    pub enum AlignSelf {
+        /// Use the value of [`AlignItems`]
+        Auto,
+        /// If the parent has [`AlignItems::Center`] only this item will be at the start
+        FlexStart,
+        /// If the parent has [`AlignItems::Center`] only this item will be at the end
+        FlexEnd,
+        /// If the parent has [`AlignItems::FlexStart`] only this item will be at the center
+        Center,
+        /// If the parent has [`AlignItems::Center`] only this item will be at the baseline
+        Baseline,
+        /// If the parent has [`AlignItems::Center`] only this item will stretch along the whole cross axis
+        Stretch,
+    }
+    impl AlignSelf {
+        pub const DEFAULT: Self = Self::Auto;
+    }
+
+    impl Default for AlignSelf {
+        fn default() -> Self {
+            Self::DEFAULT
+        }
+    }
+
+    /// Defines how each line is aligned within the flexbox.
+    ///
+    /// It only applies if [`Wrap::Wrap`] is present and if there are multiple lines of items.
+    #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+    #[reflect_value(PartialEq, Serialize, Deserialize)]
+    pub enum AlignContent {
+        /// Each line moves towards the start of the cross axis
+        FlexStart,
+        /// Each line moves towards the end of the cross axis
+        FlexEnd,
+        /// Each line moves towards the center of the cross axis
+        Center,
+        /// Each line will stretch to fill the remaining space
+        Stretch,
+        /// Each line fills the space it needs, putting the remaining space, if any
+        /// inbetween the lines
+        SpaceBetween,
+        /// Each line fills the space it needs, putting the remaining space, if any
+        /// around the lines
+        SpaceAround,
+    }
+    impl AlignContent {
+        pub const DEFAULT: Self = Self::Stretch;
+    }
+
+    impl Default for AlignContent {
+        fn default() -> Self {
+            Self::DEFAULT
+        }
+    }
+
+    /// Defines how items are aligned according to the main axis
+    #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+    #[reflect_value(PartialEq, Serialize, Deserialize)]
+    pub enum JustifyContent {
+        /// Pushed towards the start
+        FlexStart,
+        /// Pushed towards the end
+        FlexEnd,
+        /// Centered along the main axis
+        Center,
+        /// Remaining space is distributed between the items
+        SpaceBetween,
+        /// Remaining space is distributed around the items
+        SpaceAround,
+        /// Like [`JustifyContent::SpaceAround`] but with even spacing between items
+        SpaceEvenly,
+    }
+    impl JustifyContent {
+        pub const DEFAULT: Self = Self::FlexStart;
+    }
+
+    impl Default for JustifyContent {
+        fn default() -> Self {
+            Self::DEFAULT
+        }
+    }
+
+    /// Defines if flexbox items appear on a single line or on multiple lines
+    #[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
+    #[reflect_value(PartialEq, Serialize, Deserialize)]
+    pub enum Wrap {
+        /// Single line, will overflow if needed
+        NoWrap,
+        /// Multiple lines, if needed
+        Wrap,
+        /// Same as [`Wrap::Wrap`] but new lines will appear before the previous one
+        WrapReverse,
+    }
+    impl Wrap {
+        pub const DEFAULT: Self = Self::NoWrap;
+    }
+
+    impl Default for Wrap {
+        fn default() -> Self {
+            Self::DEFAULT
+        }
+    }
+}
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 2ac32e95005ff..539bbdea6aa8e 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -10,6 +10,7 @@ mod stack;
 mod ui_node;
 
 pub mod camera_config;
+pub mod layout_components;
 pub mod node_bundles;
 pub mod update;
 pub mod widget;
@@ -18,6 +19,7 @@ use bevy_render::{camera::CameraUpdateSystem, extract_component::ExtractComponen
 pub use flex::*;
 pub use focus::*;
 pub use geometry::*;
+pub use layout_components::*;
 pub use render::*;
 pub use ui_node::*;
 
@@ -25,8 +27,8 @@ pub use ui_node::*;
 pub mod prelude {
     #[doc(hidden)]
     pub use crate::{
-        camera_config::*, geometry::*, node_bundles::*, ui_node::*, widget::Button, Interaction,
-        UiScale,
+        camera_config::*, geometry::*, layout_components::flex::*, layout_components::*,
+        node_bundles::*, ui_node::*, widget::Button, Interaction, UiScale,
     };
 }
 
@@ -77,18 +79,23 @@ impl Default for UiScale {
 
 impl Plugin for UiPlugin {
     fn build(&self, app: &mut App) {
+        use crate::layout_components::flex::*;
+        use crate::layout_components::*;
+
         app.add_plugin(ExtractComponentPlugin::<UiCameraConfig>::default())
             .init_resource::<FlexSurface>()
             .init_resource::<UiScale>()
             .init_resource::<UiStack>()
+            .register_type::<Display>()
             .register_type::<AlignContent>()
             .register_type::<AlignItems>()
             .register_type::<AlignSelf>()
             .register_type::<CalculatedSize>()
+            .register_type::<LayoutControl>()
+            .register_type::<FlexContainer>()
+            .register_type::<FlexItem>()
             .register_type::<Direction>()
-            .register_type::<Display>()
-            .register_type::<FlexDirection>()
-            .register_type::<FlexWrap>()
+            .register_type::<Wrap>()
             .register_type::<FocusPolicy>()
             .register_type::<Interaction>()
             .register_type::<JustifyContent>()
@@ -96,10 +103,9 @@ impl Plugin for UiPlugin {
             // NOTE: used by Style::aspect_ratio
             .register_type::<Option<f32>>()
             .register_type::<Overflow>()
-            .register_type::<PositionType>()
+            .register_type::<Position>()
             .register_type::<Size>()
             .register_type::<UiRect>()
-            .register_type::<Style>()
             .register_type::<BackgroundColor>()
             .register_type::<UiImage>()
             .register_type::<Val>()
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index 8369b33bfe0b0..a8daf9b1a3b43 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -1,15 +1,18 @@
 //! This module contains basic node bundles used to build UIs
 
 use crate::{
-    widget::Button, BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style,
-    UiImage, ZIndex,
+    layout_components::{SizeConstraints, Spacing},
+    prelude::{FlexContainer, FlexItem},
+    widget::Button,
+    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, LayoutControl, Node, UiImage,
+    ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
 use bevy_render::{
     prelude::{Color, ComputedVisibility},
     view::Visibility,
 };
-use bevy_text::{Text, TextAlignment, TextSection, TextStyle};
+use bevy_text::Text;
 use bevy_transform::prelude::{GlobalTransform, Transform};
 
 /// The basic UI node
@@ -19,8 +22,18 @@ use bevy_transform::prelude::{GlobalTransform, Transform};
 pub struct NodeBundle {
     /// Describes the size of the node
     pub node: Node,
-    /// Describes the style including flexbox settings
-    pub style: Style,
+    /// Core controls for layouting of this node.
+    ///
+    /// See: [`Display`](crate::Display), [`Position`](crate::Position), [`Inset`](crate::Inset), [`Overflow`](crate::Overflow).
+    pub control: LayoutControl,
+    /// Defines how this node's layout should be.
+    pub layout: FlexContainer,
+    /// Defines how  this node should behave as a child of a node.
+    pub child_layout: FlexItem,
+    /// The constraints on the size of this node
+    pub size_constraints: SizeConstraints,
+    /// The margin, padding and border of the UI node
+    pub spacing: Spacing,
     /// The background color, which serves as a "fill" for this node
     pub background_color: BackgroundColor,
     /// Whether this node should block interaction with lower nodes
@@ -28,12 +41,16 @@ pub struct NodeBundle {
     /// The transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `nodebundle`, use the properties of the [`Style`] component.
+    /// To alter the position of this entity, use the properties of layouting components.
+    ///
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of this entity, use the properties of layouting components.
+    ///
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -46,10 +63,14 @@ pub struct NodeBundle {
 impl Default for NodeBundle {
     fn default() -> Self {
         NodeBundle {
+            node: Default::default(),
+            control: Default::default(),
+            layout: Default::default(),
+            child_layout: Default::default(),
+            size_constraints: Default::default(),
+            spacing: Default::default(),
             // Transparent background
             background_color: Color::NONE.into(),
-            node: Default::default(),
-            style: Default::default(),
             focus_policy: Default::default(),
             transform: Default::default(),
             global_transform: Default::default(),
@@ -65,8 +86,18 @@ impl Default for NodeBundle {
 pub struct ImageBundle {
     /// Describes the size of the node
     pub node: Node,
-    /// Describes the style including flexbox settings
-    pub style: Style,
+    /// Core controls for layouting of this node.
+    ///
+    /// See: [`Display`](crate::Display), [`Position`](crate::Position), [`Inset`](crate::Inset), [`Overflow`](crate::Overflow).
+    pub control: LayoutControl,
+    /// Defines how this node's layout should be.
+    pub layout: FlexContainer,
+    /// Defines how  this node should behave as a child of a node.
+    pub child_layout: FlexItem,
+    /// The constraints on the size of this node
+    pub size_constraints: SizeConstraints,
+    /// The margin, padding and border of the UI node
+    pub spacing: Spacing,
     /// The calculated size based on the given image
     pub calculated_size: CalculatedSize,
     /// The background color, which serves as a "fill" for this node
@@ -80,12 +111,16 @@ pub struct ImageBundle {
     /// The transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of this entity, use the properties of layouting components.
+    ///
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of this entity, use the properties of layouting components.
+    ///
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -96,12 +131,22 @@ pub struct ImageBundle {
 }
 
 /// A UI node that is text
-#[derive(Bundle, Clone, Debug, Default)]
+#[derive(Bundle, Clone, Debug)]
 pub struct TextBundle {
     /// Describes the size of the node
     pub node: Node,
-    /// Describes the style including flexbox settings
-    pub style: Style,
+    /// Core controls for layouting of this node.
+    ///
+    /// See: [`Display`](crate::Display), [`Position`](crate::Position), [`Inset`](crate::Inset), [`Overflow`](crate::Overflow).
+    pub control: LayoutControl,
+    /// Defines how this node's layout should be.
+    pub layout: FlexContainer,
+    /// Defines how  this node should behave as a child of a node.
+    pub child_layout: FlexItem,
+    /// The constraints on the size of this node
+    pub size_constraints: SizeConstraints,
+    /// The margin, padding and border of the UI node
+    pub spacing: Spacing,
     /// Contains the text of the node
     pub text: Text,
     /// The calculated size based on the given image
@@ -111,12 +156,16 @@ pub struct TextBundle {
     /// The transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of this entity, use the properties of layouting components.
+    ///
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of this entity, use the properties of layouting components.
+    ///
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -126,38 +175,25 @@ pub struct TextBundle {
     pub z_index: ZIndex,
 }
 
-impl TextBundle {
-    /// Create a [`TextBundle`] from a single section.
-    ///
-    /// See [`Text::from_section`] for usage.
-    pub fn from_section(value: impl Into<String>, style: TextStyle) -> Self {
-        Self {
-            text: Text::from_section(value, style),
-            ..Default::default()
-        }
-    }
-
-    /// Create a [`TextBundle`] from a list of sections.
-    ///
-    /// See [`Text::from_sections`] for usage.
-    pub fn from_sections(sections: impl IntoIterator<Item = TextSection>) -> Self {
-        Self {
-            text: Text::from_sections(sections),
-            ..Default::default()
+impl Default for TextBundle {
+    fn default() -> Self {
+        TextBundle {
+            focus_policy: FocusPolicy::Pass,
+            text: Default::default(),
+            node: Default::default(),
+            calculated_size: Default::default(),
+            layout: Default::default(),
+            control: Default::default(),
+            child_layout: Default::default(),
+            size_constraints: Default::default(),
+            transform: Default::default(),
+            global_transform: Default::default(),
+            visibility: Default::default(),
+            computed_visibility: Default::default(),
+            z_index: Default::default(),
+            spacing: Default::default(),
         }
     }
-
-    /// Returns this [`TextBundle`] with a new [`TextAlignment`] on [`Text`].
-    pub const fn with_text_alignment(mut self, alignment: TextAlignment) -> Self {
-        self.text.alignment = alignment;
-        self
-    }
-
-    /// Returns this [`TextBundle`] with a new [`Style`].
-    pub const fn with_style(mut self, style: Style) -> Self {
-        self.style = style;
-        self
-    }
 }
 
 /// A UI node that is a button
@@ -167,8 +203,18 @@ pub struct ButtonBundle {
     pub node: Node,
     /// Marker component that signals this node is a button
     pub button: Button,
-    /// Describes the style including flexbox settings
-    pub style: Style,
+    /// Core controls for layouting of this node.
+    ///
+    /// See: [`Display`](crate::Display), [`Position`](crate::Position), [`Inset`](crate::Inset), [`Overflow`](crate::Overflow).
+    pub control: LayoutControl,
+    /// Defines how this node's layout should be.
+    pub layout: FlexContainer,
+    /// Defines how  this node should behave as a child of a node.
+    pub child_layout: FlexItem,
+    /// The constraints on the size of this node
+    pub size_constraints: SizeConstraints,
+    /// The margin, padding and border of the UI node
+    pub spacing: Spacing,
     /// Describes whether and how the button has been interacted with by the input
     pub interaction: Interaction,
     /// Whether this node should block interaction with lower nodes
@@ -182,12 +228,16 @@ pub struct ButtonBundle {
     /// The transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of this entity, use the properties of layouting components.
+    ///
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of this entity, use the properties of layouting components.
+    ///
+    /// See: [`LayoutControl`], [`FlexContainer`], [`FlexItem`], [`SizeConstraints`], [`Spacing`].
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -203,7 +253,6 @@ impl Default for ButtonBundle {
             focus_policy: FocusPolicy::Block,
             node: Default::default(),
             button: Default::default(),
-            style: Default::default(),
             interaction: Default::default(),
             background_color: Default::default(),
             image: Default::default(),
@@ -212,6 +261,11 @@ impl Default for ButtonBundle {
             visibility: Default::default(),
             computed_visibility: Default::default(),
             z_index: Default::default(),
+            control: Default::default(),
+            layout: Default::default(),
+            child_layout: Default::default(),
+            size_constraints: Default::default(),
+            spacing: Default::default(),
         }
     }
 }
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 31f232c4d1d85..c112d17b5d146 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -1,4 +1,4 @@
-use crate::{Size, UiRect};
+use crate::Size;
 use bevy_asset::Handle;
 use bevy_ecs::{prelude::Component, reflect::ReflectComponent};
 use bevy_math::{Rect, Vec2};
@@ -56,6 +56,7 @@ pub enum Val {
 
 impl Val {
     pub const DEFAULT: Self = Self::Undefined;
+    pub const FULL: Val = Val::Percent(100.);
 }
 
 impl Default for Val {
@@ -207,347 +208,6 @@ impl Val {
     }
 }
 
-/// Describes the style of a UI node
-///
-/// It uses the [Flexbox](https://cssreference.io/flexbox/) system.
-#[derive(Component, Clone, PartialEq, Debug, Reflect)]
-#[reflect(Component, Default, PartialEq)]
-pub struct Style {
-    /// Whether to arrange this node and its children with flexbox layout
-    ///
-    /// If this is set to [`Display::None`], this node will be collapsed.
-    pub display: Display,
-    /// Whether to arrange this node relative to other nodes, or positioned absolutely
-    pub position_type: PositionType,
-    /// Which direction the content of this node should go
-    pub direction: Direction,
-    /// Whether to use column or row layout
-    pub flex_direction: FlexDirection,
-    /// How to wrap nodes
-    pub flex_wrap: FlexWrap,
-    /// How items are aligned according to the cross axis
-    pub align_items: AlignItems,
-    /// Like align_items but for only this item
-    pub align_self: AlignSelf,
-    /// How to align each line, only applies if flex_wrap is set to
-    /// [`FlexWrap::Wrap`] and there are multiple lines of items
-    pub align_content: AlignContent,
-    /// How items align according to the main axis
-    pub justify_content: JustifyContent,
-    /// The position of the node as described by its Rect
-    pub position: UiRect,
-    /// The margin of the node
-    pub margin: UiRect,
-    /// The padding of the node
-    pub padding: UiRect,
-    /// The border of the node
-    pub border: UiRect,
-    /// Defines how much a flexbox item should grow if there's space available
-    pub flex_grow: f32,
-    /// How to shrink if there's not enough space available
-    pub flex_shrink: f32,
-    /// The initial size of the item
-    pub flex_basis: Val,
-    /// The size of the flexbox
-    pub size: Size,
-    /// The minimum size of the flexbox
-    pub min_size: Size,
-    /// The maximum size of the flexbox
-    pub max_size: Size,
-    /// The aspect ratio of the flexbox
-    pub aspect_ratio: Option<f32>,
-    /// How to handle overflow
-    pub overflow: Overflow,
-    /// The size of the gutters between the rows and columns of the flexbox layout
-    ///
-    /// Values of `Size::UNDEFINED` and `Size::AUTO` are treated as zero.
-    pub gap: Size,
-}
-
-impl Style {
-    pub const DEFAULT: Self = Self {
-        display: Display::DEFAULT,
-        position_type: PositionType::DEFAULT,
-        direction: Direction::DEFAULT,
-        flex_direction: FlexDirection::DEFAULT,
-        flex_wrap: FlexWrap::DEFAULT,
-        align_items: AlignItems::DEFAULT,
-        align_self: AlignSelf::DEFAULT,
-        align_content: AlignContent::DEFAULT,
-        justify_content: JustifyContent::DEFAULT,
-        position: UiRect::DEFAULT,
-        margin: UiRect::DEFAULT,
-        padding: UiRect::DEFAULT,
-        border: UiRect::DEFAULT,
-        flex_grow: 0.0,
-        flex_shrink: 1.0,
-        flex_basis: Val::Auto,
-        size: Size::AUTO,
-        min_size: Size::AUTO,
-        max_size: Size::AUTO,
-        aspect_ratio: None,
-        overflow: Overflow::DEFAULT,
-        gap: Size::UNDEFINED,
-    };
-}
-
-impl Default for Style {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// How items are aligned according to the cross axis
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum AlignItems {
-    /// Items are aligned at the start
-    FlexStart,
-    /// Items are aligned at the end
-    FlexEnd,
-    /// Items are aligned at the center
-    Center,
-    /// Items are aligned at the baseline
-    Baseline,
-    /// Items are stretched across the whole cross axis
-    Stretch,
-}
-
-impl AlignItems {
-    pub const DEFAULT: Self = Self::Stretch;
-}
-
-impl Default for AlignItems {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// Works like [`AlignItems`] but applies only to a single item
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum AlignSelf {
-    /// Use the value of [`AlignItems`]
-    Auto,
-    /// If the parent has [`AlignItems::Center`] only this item will be at the start
-    FlexStart,
-    /// If the parent has [`AlignItems::Center`] only this item will be at the end
-    FlexEnd,
-    /// If the parent has [`AlignItems::FlexStart`] only this item will be at the center
-    Center,
-    /// If the parent has [`AlignItems::Center`] only this item will be at the baseline
-    Baseline,
-    /// If the parent has [`AlignItems::Center`] only this item will stretch along the whole cross axis
-    Stretch,
-}
-
-impl AlignSelf {
-    pub const DEFAULT: Self = Self::Auto;
-}
-
-impl Default for AlignSelf {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// Defines how each line is aligned within the flexbox.
-///
-/// It only applies if [`FlexWrap::Wrap`] is present and if there are multiple lines of items.
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum AlignContent {
-    /// Each line moves towards the start of the cross axis
-    FlexStart,
-    /// Each line moves towards the end of the cross axis
-    FlexEnd,
-    /// Each line moves towards the center of the cross axis
-    Center,
-    /// Each line will stretch to fill the remaining space
-    Stretch,
-    /// Each line fills the space it needs, putting the remaining space, if any
-    /// inbetween the lines
-    SpaceBetween,
-    /// Each line fills the space it needs, putting the remaining space, if any
-    /// around the lines
-    SpaceAround,
-}
-
-impl AlignContent {
-    pub const DEFAULT: Self = Self::Stretch;
-}
-
-impl Default for AlignContent {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// Defines the text direction
-///
-/// For example English is written LTR (left-to-right) while Arabic is written RTL (right-to-left).
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum Direction {
-    /// Inherit from parent node
-    Inherit,
-    /// Text is written left to right
-    LeftToRight,
-    /// Text is written right to left
-    RightToLeft,
-}
-
-impl Direction {
-    pub const DEFAULT: Self = Self::Inherit;
-}
-
-impl Default for Direction {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// Whether to use a Flexbox layout model.
-///
-/// Part of the [`Style`] component.
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum Display {
-    /// Use Flexbox layout model to determine the position of this [`Node`].
-    Flex,
-    /// Use no layout, don't render this node and its children.
-    ///
-    /// If you want to hide a node and its children,
-    /// but keep its layout in place, set its [`Visibility`](bevy_render::view::Visibility) component instead.
-    None,
-}
-
-impl Display {
-    pub const DEFAULT: Self = Self::Flex;
-}
-
-impl Default for Display {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// Defines how flexbox items are ordered within a flexbox
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum FlexDirection {
-    /// Same way as text direction along the main axis
-    Row,
-    /// Flex from top to bottom
-    Column,
-    /// Opposite way as text direction along the main axis
-    RowReverse,
-    /// Flex from bottom to top
-    ColumnReverse,
-}
-
-impl FlexDirection {
-    pub const DEFAULT: Self = Self::Row;
-}
-
-impl Default for FlexDirection {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// Defines how items are aligned according to the main axis
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum JustifyContent {
-    /// Pushed towards the start
-    FlexStart,
-    /// Pushed towards the end
-    FlexEnd,
-    /// Centered along the main axis
-    Center,
-    /// Remaining space is distributed between the items
-    SpaceBetween,
-    /// Remaining space is distributed around the items
-    SpaceAround,
-    /// Like [`JustifyContent::SpaceAround`] but with even spacing between items
-    SpaceEvenly,
-}
-
-impl JustifyContent {
-    pub const DEFAULT: Self = Self::FlexStart;
-}
-
-impl Default for JustifyContent {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// Whether to show or hide overflowing items
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect, Serialize, Deserialize)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum Overflow {
-    /// Show overflowing items
-    Visible,
-    /// Hide overflowing items
-    Hidden,
-}
-
-impl Overflow {
-    pub const DEFAULT: Self = Self::Visible;
-}
-
-impl Default for Overflow {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// The strategy used to position this node
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum PositionType {
-    /// Relative to all other nodes with the [`PositionType::Relative`] value
-    Relative,
-    /// Independent of all other nodes
-    ///
-    /// As usual, the `Style.position` field of this node is specified relative to its parent node
-    Absolute,
-}
-
-impl PositionType {
-    const DEFAULT: Self = Self::Relative;
-}
-
-impl Default for PositionType {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// Defines if flexbox items appear on a single line or on multiple lines
-#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
-#[reflect(PartialEq, Serialize, Deserialize)]
-pub enum FlexWrap {
-    /// Single line, will overflow if needed
-    NoWrap,
-    /// Multiple lines, if needed
-    Wrap,
-    /// Same as [`FlexWrap::Wrap`] but new lines will appear before the previous one
-    WrapReverse,
-}
-
-impl FlexWrap {
-    const DEFAULT: Self = Self::NoWrap;
-}
-
-impl Default for FlexWrap {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
 /// The calculated size of the node
 #[derive(Component, Copy, Clone, Debug, Reflect)]
 #[reflect(Component)]
diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs
index 623add4a6a283..994ad7dae97de 100644
--- a/crates/bevy_ui/src/update.rs
+++ b/crates/bevy_ui/src/update.rs
@@ -1,6 +1,9 @@
 //! This module contains systems that update the UI when something changes
 
-use crate::{CalculatedClip, Overflow, Style};
+use crate::{
+    layout_components::{flex::FlexLayoutQuery, Overflow},
+    CalculatedClip,
+};
 
 use super::Node;
 use bevy_ecs::{
@@ -16,7 +19,12 @@ use bevy_transform::components::GlobalTransform;
 pub fn update_clipping_system(
     mut commands: Commands,
     root_node_query: Query<Entity, (With<Node>, Without<Parent>)>,
-    mut node_query: Query<(&Node, &GlobalTransform, &Style, Option<&mut CalculatedClip>)>,
+    mut node_query: Query<(
+        &Node,
+        &GlobalTransform,
+        FlexLayoutQuery,
+        Option<&mut CalculatedClip>,
+    )>,
     children_query: Query<&Children>,
 ) {
     for root_node in &root_node_query {
@@ -33,11 +41,16 @@ pub fn update_clipping_system(
 fn update_clipping(
     commands: &mut Commands,
     children_query: &Query<&Children>,
-    node_query: &mut Query<(&Node, &GlobalTransform, &Style, Option<&mut CalculatedClip>)>,
+    node_query: &mut Query<(
+        &Node,
+        &GlobalTransform,
+        FlexLayoutQuery,
+        Option<&mut CalculatedClip>,
+    )>,
     entity: Entity,
     clip: Option<Rect>,
 ) {
-    let (node, global_transform, style, calculated_clip) = node_query.get_mut(entity).unwrap();
+    let (node, global_transform, layout, calculated_clip) = node_query.get_mut(entity).unwrap();
     // Update this node's CalculatedClip component
     match (clip, calculated_clip) {
         (None, None) => {}
@@ -55,7 +68,7 @@ fn update_clipping(
     }
 
     // Calculate new clip for its children
-    let children_clip = match style.overflow {
+    let children_clip = match layout.control.overflow {
         Overflow::Visible => clip,
         Overflow::Hidden => {
             let node_center = global_transform.translation().truncate();
diff --git a/crates/bevy_ui/src/widget/text.rs b/crates/bevy_ui/src/widget/text.rs
index c2694f3e142a1..c441af25b6aa7 100644
--- a/crates/bevy_ui/src/widget/text.rs
+++ b/crates/bevy_ui/src/widget/text.rs
@@ -1,4 +1,8 @@
-use crate::{CalculatedSize, Size, Style, UiScale, Val};
+use crate::{
+    layout_components::flex::{FlexLayoutChanged, FlexLayoutQuery},
+    prelude::{FlexContainer, FlexItem},
+    CalculatedSize, Size, UiScale, Val,
+};
 use bevy_asset::Assets;
 use bevy_ecs::{
     entity::Entity,
@@ -59,11 +63,11 @@ pub fn text_system(
     mut font_atlas_set_storage: ResMut<Assets<FontAtlasSet>>,
     mut text_pipeline: ResMut<TextPipeline>,
     mut text_queries: ParamSet<(
-        Query<Entity, Or<(Changed<Text>, Changed<Style>)>>,
-        Query<Entity, (With<Text>, With<Style>)>,
+        Query<Entity, Or<(Changed<Text>, FlexLayoutChanged)>>,
+        Query<Entity, (With<Text>, With<FlexContainer>, With<FlexItem>)>,
         Query<(
             &Text,
-            &Style,
+            FlexLayoutQuery,
             &mut CalculatedSize,
             Option<&mut TextLayoutInfo>,
         )>,
@@ -99,18 +103,18 @@ pub fn text_system(
     let mut new_queue = Vec::new();
     let mut query = text_queries.p2();
     for entity in queued_text.entities.drain(..) {
-        if let Ok((text, style, mut calculated_size, text_layout_info)) = query.get_mut(entity) {
+        if let Ok((text, layout, mut calculated_size, text_layout_info)) = query.get_mut(entity) {
             let node_size = Vec2::new(
                 text_constraint(
-                    style.min_size.width,
-                    style.size.width,
-                    style.max_size.width,
+                    layout.size_constraints.min.width,
+                    layout.size_constraints.suggested.width,
+                    layout.size_constraints.max.width,
                     scale_factor,
                 ),
                 text_constraint(
-                    style.min_size.height,
-                    style.size.height,
-                    style.max_size.height,
+                    layout.size_constraints.min.height,
+                    layout.size_constraints.suggested.height,
+                    layout.size_constraints.max.height,
                     scale_factor,
                 ),
             );
diff --git a/examples/3d/bloom.rs b/examples/3d/bloom.rs
index c112ffa9cda40..706bf8a86047d 100644
--- a/examples/3d/bloom.rs
+++ b/examples/3d/bloom.rs
@@ -75,25 +75,26 @@ fn setup_scene(
         }
     }
 
-    commands.spawn(
-        TextBundle::from_section(
+    commands.spawn(TextBundle {
+        text: Text::from_section(
             "",
             TextStyle {
                 font: asset_server.load("fonts/FiraMono-Medium.ttf"),
                 font_size: 18.0,
                 color: Color::BLACK,
             },
-        )
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
+        ),
+        control: LayoutControl {
+            position: Position::Absolute,
+            inset: Inset(UiRect {
                 top: Val::Px(10.0),
                 left: Val::Px(10.0),
                 ..default()
-            },
+            }),
             ..default()
-        }),
-    );
+        },
+        ..default()
+    });
 }
 
 // ------------------------------------------------------------------------------------------------
diff --git a/examples/ecs/state.rs b/examples/ecs/state.rs
index 8980077a10de0..2bd29d4971b86 100644
--- a/examples/ecs/state.rs
+++ b/examples/ecs/state.rs
@@ -42,9 +42,9 @@ fn setup(mut commands: Commands) {
 fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
     let button_entity = commands
         .spawn(NodeBundle {
-            style: Style {
+            size_constraints: SizeConstraints::FILL_PARENT,
+            layout: FlexContainer {
                 // center button
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..default()
@@ -54,8 +54,8 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
         .with_children(|parent| {
             parent
                 .spawn(ButtonBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                    size_constraints: SizeConstraints::suggested(Val::Px(150.0), Val::Px(65.0)),
+                    layout: FlexContainer {
                         // horizontally center child text
                         justify_content: JustifyContent::Center,
                         // vertically center child text
@@ -66,14 +66,17 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
                     ..default()
                 })
                 .with_children(|parent| {
-                    parent.spawn(TextBundle::from_section(
-                        "Play",
-                        TextStyle {
-                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                            font_size: 40.0,
-                            color: Color::rgb(0.9, 0.9, 0.9),
-                        },
-                    ));
+                    parent.spawn(TextBundle {
+                        text: Text::from_section(
+                            "Play",
+                            TextStyle {
+                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                font_size: 40.0,
+                                color: Color::rgb(0.9, 0.9, 0.9),
+                            },
+                        ),
+                        ..default()
+                    });
                 });
         })
         .id();
diff --git a/examples/games/alien_cake_addict.rs b/examples/games/alien_cake_addict.rs
index bc4f04bd1ac6c..df9ad5c7fd19a 100644
--- a/examples/games/alien_cake_addict.rs
+++ b/examples/games/alien_cake_addict.rs
@@ -155,25 +155,26 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut game: ResMu
     game.bonus.handle = asset_server.load("models/AlienCake/cakeBirthday.glb#Scene0");
 
     // scoreboard
-    commands.spawn(
-        TextBundle::from_section(
+    commands.spawn(TextBundle {
+        text: Text::from_section(
             "Score:",
             TextStyle {
                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                 font_size: 40.0,
                 color: Color::rgb(0.5, 0.5, 1.0),
             },
-        )
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
+        ),
+        control: LayoutControl {
+            position: Position::Absolute,
+            inset: Inset(UiRect {
                 top: Val::Px(5.0),
                 left: Val::Px(5.0),
                 ..default()
-            },
+            }),
             ..default()
-        }),
-    );
+        },
+        ..default()
+    });
 }
 
 // remove all entities that are not a camera
@@ -379,8 +380,8 @@ fn gameover_keyboard(mut state: ResMut<State<GameState>>, keyboard_input: Res<In
 fn display_score(mut commands: Commands, asset_server: Res<AssetServer>, game: Res<Game>) {
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+            size_constraints: SizeConstraints::FILL_PARENT,
+            layout: FlexContainer {
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
@@ -388,13 +389,16 @@ fn display_score(mut commands: Commands, asset_server: Res<AssetServer>, game: R
             ..default()
         })
         .with_children(|parent| {
-            parent.spawn(TextBundle::from_section(
-                format!("Cake eaten: {}", game.cake_eaten),
-                TextStyle {
-                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                    font_size: 80.0,
-                    color: Color::rgb(0.5, 0.5, 1.0),
-                },
-            ));
+            parent.spawn(TextBundle {
+                text: Text::from_section(
+                    format!("Cake eaten: {}", game.cake_eaten),
+                    TextStyle {
+                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                        font_size: 80.0,
+                        color: Color::rgb(0.5, 0.5, 1.0),
+                    },
+                ),
+                ..default()
+            });
         });
 }
diff --git a/examples/games/breakout.rs b/examples/games/breakout.rs
index 263a148b66cbd..c9426e2a0dd8b 100644
--- a/examples/games/breakout.rs
+++ b/examples/games/breakout.rs
@@ -217,8 +217,8 @@ fn setup(
     ));
 
     // Scoreboard
-    commands.spawn(
-        TextBundle::from_sections([
+    commands.spawn(TextBundle {
+        text: Text::from_sections([
             TextSection::new(
                 "Score: ",
                 TextStyle {
@@ -232,17 +232,18 @@ fn setup(
                 font_size: SCOREBOARD_FONT_SIZE,
                 color: SCORE_COLOR,
             }),
-        ])
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
+        ]),
+        control: LayoutControl {
+            position: Position::Absolute,
+            inset: Inset(UiRect {
                 top: SCOREBOARD_TEXT_PADDING,
                 left: SCOREBOARD_TEXT_PADDING,
                 ..default()
-            },
+            }),
             ..default()
-        }),
-    );
+        },
+        ..default()
+    });
 
     // Walls
     commands.spawn(WallBundle::new(WallLocation::Left));
diff --git a/examples/games/contributors.rs b/examples/games/contributors.rs
index 86afff1822eae..9dbbd00a8863b 100644
--- a/examples/games/contributors.rs
+++ b/examples/games/contributors.rs
@@ -136,25 +136,28 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2dBundle::default());
 
     commands.spawn((
-        TextBundle::from_sections([
-            TextSection::new(
-                "Contributor showcase",
-                TextStyle {
+        TextBundle {
+            text: Text::from_sections([
+                TextSection::new(
+                    "Contributor showcase",
+                    TextStyle {
+                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                        font_size: 60.0,
+                        color: Color::WHITE,
+                    },
+                ),
+                TextSection::from_style(TextStyle {
                     font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                     font_size: 60.0,
                     color: Color::WHITE,
-                },
-            ),
-            TextSection::from_style(TextStyle {
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                font_size: 60.0,
-                color: Color::WHITE,
-            }),
-        ])
-        .with_style(Style {
-            align_self: AlignSelf::FlexEnd,
+                }),
+            ]),
+            child_layout: FlexItem {
+                align_self: AlignSelf::FlexEnd,
+                ..default()
+            },
             ..default()
-        }),
+        },
         ContributorDisplay,
     ));
 }
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index 58daa1f307cd1..5036a5187eb27 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -84,10 +84,10 @@ mod splash {
         commands
             .spawn((
                 NodeBundle {
-                    style: Style {
+                    size_constraints: SizeConstraints::FILL_PARENT,
+                    layout: FlexContainer {
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                         ..default()
                     },
                     ..default()
@@ -96,11 +96,8 @@ mod splash {
             ))
             .with_children(|parent| {
                 parent.spawn(ImageBundle {
-                    style: Style {
-                        // This will set the logo to be 200px wide, and auto adjust its height
-                        size: Size::new(Val::Px(200.0), Val::Auto),
-                        ..default()
-                    },
+                    // This will set the logo to be 200px wide, and auto adjust its height
+                    size_constraints: SizeConstraints::suggested(Val::Px(200.0), Val::Auto),
                     image: UiImage::new(icon),
                     ..default()
                 });
@@ -158,8 +155,8 @@ mod game {
         commands
             .spawn((
                 NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                    size_constraints: SizeConstraints::FILL_PARENT,
+                    layout: FlexContainer {
                         // center children
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
@@ -173,9 +170,9 @@ mod game {
                 // First create a `NodeBundle` for centering what we want to display
                 parent
                     .spawn(NodeBundle {
-                        style: Style {
+                        layout: FlexContainer {
                             // This will display its children in a column, from top to bottom
-                            flex_direction: FlexDirection::Column,
+                            direction: Direction::Column,
                             // `align_items` will align children on the cross axis. Here the main axis is
                             // vertical (column), so the cross axis is horizontal. This will center the
                             // children
@@ -187,22 +184,20 @@ mod game {
                     })
                     .with_children(|parent| {
                         // Display two lines of text, the second one with the current settings
-                        parent.spawn(
-                            TextBundle::from_section(
+                        parent.spawn(TextBundle {
+                            text: Text::from_section(
                                 "Will be back to the menu shortly...",
                                 TextStyle {
                                     font: font.clone(),
                                     font_size: 80.0,
                                     color: TEXT_COLOR,
                                 },
-                            )
-                            .with_style(Style {
-                                margin: UiRect::all(Val::Px(50.0)),
-                                ..default()
-                            }),
-                        );
-                        parent.spawn(
-                            TextBundle::from_sections([
+                            ),
+                            spacing: Spacing::margin_all(Val::Px(50.0)),
+                            ..default()
+                        });
+                        parent.spawn(TextBundle {
+                            text: Text::from_sections([
                                 TextSection::new(
                                     format!("quality: {:?}", *display_quality),
                                     TextStyle {
@@ -227,12 +222,10 @@ mod game {
                                         color: Color::GREEN,
                                     },
                                 ),
-                            ])
-                            .with_style(Style {
-                                margin: UiRect::all(Val::Px(50.0)),
-                                ..default()
-                            }),
-                        );
+                            ]),
+                            spacing: Spacing::margin_all(Val::Px(50.0)),
+                            ..default()
+                        });
                     });
             });
         // Spawn a 5 seconds timer to trigger going back to the menu
@@ -408,27 +401,25 @@ mod menu {
 
     fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+
         // Common style for all buttons on the screen
-        let button_style = Style {
-            size: Size::new(Val::Px(250.0), Val::Px(65.0)),
-            margin: UiRect::all(Val::Px(20.0)),
+        let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
+        let button_container_layout = FlexContainer {
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..default()
         };
-        let button_icon_style = Style {
-            size: Size::new(Val::Px(30.0), Val::Auto),
-            // This takes the icons out of the flexbox flow, to be positioned exactly
-            position_type: PositionType::Absolute,
-            // The icon will be close to the left border of the button
-            position: UiRect {
-                left: Val::Px(10.0),
-                right: Val::Auto,
-                top: Val::Auto,
-                bottom: Val::Auto,
-            },
-            ..default()
-        };
+        let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(250.0));
+
+        let button_icon_size_constraints = SizeConstraints::suggested(Val::Px(30.0), Val::Auto);
+        let button_icon_inset = Inset(UiRect {
+            left: Val::Px(10.0),
+            right: Val::Auto,
+            top: Val::Auto,
+            bottom: Val::Auto,
+        });
+        let button_icon_position = Position::Absolute;
+
         let button_text_style = TextStyle {
             font: font.clone(),
             font_size: 40.0,
@@ -438,8 +429,8 @@ mod menu {
         commands
             .spawn((
                 NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                    size_constraints: SizeConstraints::FILL_PARENT,
+                    layout: FlexContainer {
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -451,8 +442,8 @@ mod menu {
             .with_children(|parent| {
                 parent
                     .spawn(NodeBundle {
-                        style: Style {
-                            flex_direction: FlexDirection::Column,
+                        layout: FlexContainer {
+                            direction: Direction::Column,
                             align_items: AlignItems::Center,
                             ..default()
                         },
@@ -461,20 +452,18 @@ mod menu {
                     })
                     .with_children(|parent| {
                         // Display the game name
-                        parent.spawn(
-                            TextBundle::from_section(
+                        parent.spawn(TextBundle {
+                            text: Text::from_section(
                                 "Bevy Game Menu UI",
                                 TextStyle {
                                     font: font.clone(),
                                     font_size: 80.0,
                                     color: TEXT_COLOR,
                                 },
-                            )
-                            .with_style(Style {
-                                margin: UiRect::all(Val::Px(50.0)),
-                                ..default()
-                            }),
-                        );
+                            ),
+                            spacing: Spacing::margin_all(Val::Px(50.0)),
+                            ..default()
+                        });
 
                         // Display three buttons for each action available from the main menu:
                         // - new game
@@ -483,7 +472,9 @@ mod menu {
                         parent
                             .spawn((
                                 ButtonBundle {
-                                    style: button_style.clone(),
+                                    size_constraints: button_size_constraints,
+                                    spacing: button_spacing,
+                                    layout: button_container_layout,
                                     background_color: NORMAL_BUTTON.into(),
                                     ..default()
                                 },
@@ -492,19 +483,26 @@ mod menu {
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/right.png");
                                 parent.spawn(ImageBundle {
-                                    style: button_icon_style.clone(),
+                                    size_constraints: button_icon_size_constraints,
+                                    control: LayoutControl {
+                                        position: button_icon_position,
+                                        inset: button_icon_inset,
+                                        ..default()
+                                    },
                                     image: UiImage::new(icon),
                                     ..default()
                                 });
-                                parent.spawn(TextBundle::from_section(
-                                    "New Game",
-                                    button_text_style.clone(),
-                                ));
+                                parent.spawn(TextBundle {
+                                    text: Text::from_section("New Game", button_text_style.clone()),
+                                    ..default()
+                                });
                             });
                         parent
                             .spawn((
                                 ButtonBundle {
-                                    style: button_style.clone(),
+                                    size_constraints: button_size_constraints,
+                                    spacing: button_spacing,
+                                    layout: button_container_layout,
                                     background_color: NORMAL_BUTTON.into(),
                                     ..default()
                                 },
@@ -513,19 +511,26 @@ mod menu {
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/wrench.png");
                                 parent.spawn(ImageBundle {
-                                    style: button_icon_style.clone(),
+                                    size_constraints: button_icon_size_constraints,
+                                    control: LayoutControl {
+                                        position: button_icon_position,
+                                        inset: button_icon_inset,
+                                        ..default()
+                                    },
                                     image: UiImage::new(icon),
                                     ..default()
                                 });
-                                parent.spawn(TextBundle::from_section(
-                                    "Settings",
-                                    button_text_style.clone(),
-                                ));
+                                parent.spawn(TextBundle {
+                                    text: Text::from_section("Settings", button_text_style.clone()),
+                                    ..default()
+                                });
                             });
                         parent
                             .spawn((
                                 ButtonBundle {
-                                    style: button_style,
+                                    size_constraints: button_size_constraints,
+                                    spacing: button_spacing,
+                                    layout: button_container_layout,
                                     background_color: NORMAL_BUTTON.into(),
                                     ..default()
                                 },
@@ -534,25 +539,33 @@ mod menu {
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/exitRight.png");
                                 parent.spawn(ImageBundle {
-                                    style: button_icon_style,
+                                    size_constraints: button_icon_size_constraints,
+                                    control: LayoutControl {
+                                        position: button_icon_position,
+                                        inset: button_icon_inset,
+                                        ..default()
+                                    },
                                     image: UiImage::new(icon),
                                     ..default()
                                 });
-                                parent.spawn(TextBundle::from_section("Quit", button_text_style));
+                                parent.spawn(TextBundle {
+                                    text: Text::from_section("Quit", button_text_style),
+                                    ..default()
+                                });
                             });
                     });
             });
     }
 
     fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
-        let button_style = Style {
-            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-            margin: UiRect::all(Val::Px(20.0)),
+        // Common style for all buttons on this menu
+        let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
+        let button_container_layout = FlexContainer {
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..default()
         };
-
+        let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(65.0));
         let button_text_style = TextStyle {
             font: asset_server.load("fonts/FiraSans-Bold.ttf"),
             font_size: 40.0,
@@ -562,8 +575,8 @@ mod menu {
         commands
             .spawn((
                 NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                    size_constraints: SizeConstraints::FILL_PARENT,
+                    layout: FlexContainer {
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -575,8 +588,8 @@ mod menu {
             .with_children(|parent| {
                 parent
                     .spawn(NodeBundle {
-                        style: Style {
-                            flex_direction: FlexDirection::Column,
+                        layout: FlexContainer {
+                            direction: Direction::Column,
                             align_items: AlignItems::Center,
                             ..default()
                         },
@@ -592,17 +605,19 @@ mod menu {
                             parent
                                 .spawn((
                                     ButtonBundle {
-                                        style: button_style.clone(),
+                                        size_constraints: button_size_constraints,
+                                        spacing: button_spacing,
+                                        layout: button_container_layout,
                                         background_color: NORMAL_BUTTON.into(),
                                         ..default()
                                     },
                                     action,
                                 ))
                                 .with_children(|parent| {
-                                    parent.spawn(TextBundle::from_section(
-                                        text,
-                                        button_text_style.clone(),
-                                    ));
+                                    parent.spawn(TextBundle {
+                                        text: Text::from_section(text, button_text_style.clone()),
+                                        ..default()
+                                    });
                                 });
                         }
                     });
@@ -614,9 +629,10 @@ mod menu {
         asset_server: Res<AssetServer>,
         display_quality: Res<DisplayQuality>,
     ) {
-        let button_style = Style {
-            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-            margin: UiRect::all(Val::Px(20.0)),
+        // Common style for all buttons on this menu
+        let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(65.0));
+        let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
+        let button_container_layout = FlexContainer {
             justify_content: JustifyContent::Center,
             align_items: AlignItems::Center,
             ..default()
@@ -630,8 +646,8 @@ mod menu {
         commands
             .spawn((
                 NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                    size_constraints: SizeConstraints::FILL_PARENT,
+                    layout: FlexContainer {
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -643,8 +659,8 @@ mod menu {
             .with_children(|parent| {
                 parent
                     .spawn(NodeBundle {
-                        style: Style {
-                            flex_direction: FlexDirection::Column,
+                        layout: FlexContainer {
+                            direction: Direction::Column,
                             align_items: AlignItems::Center,
                             ..default()
                         },
@@ -656,7 +672,7 @@ mod menu {
                         // use the default value, `FlexDirection::Row`, from left to right.
                         parent
                             .spawn(NodeBundle {
-                                style: Style {
+                                layout: FlexContainer {
                                     align_items: AlignItems::Center,
                                     ..default()
                                 },
@@ -665,10 +681,13 @@ mod menu {
                             })
                             .with_children(|parent| {
                                 // Display a label for the current setting
-                                parent.spawn(TextBundle::from_section(
-                                    "Display Quality",
-                                    button_text_style.clone(),
-                                ));
+                                parent.spawn(TextBundle {
+                                    text: Text::from_section(
+                                        "Display Quality",
+                                        button_text_style.clone(),
+                                    ),
+                                    ..default()
+                                });
                                 // Display a button for each possible value
                                 for quality_setting in [
                                     DisplayQuality::Low,
@@ -676,18 +695,23 @@ mod menu {
                                     DisplayQuality::High,
                                 ] {
                                     let mut entity = parent.spawn(ButtonBundle {
-                                        style: Style {
-                                            size: Size::new(Val::Px(150.0), Val::Px(65.0)),
-                                            ..button_style.clone()
-                                        },
+                                        size_constraints: SizeConstraints::suggested(
+                                            Val::Px(150.0),
+                                            Val::Px(65.0),
+                                        ),
+                                        layout: button_container_layout,
+                                        spacing: button_spacing,
                                         background_color: NORMAL_BUTTON.into(),
                                         ..default()
                                     });
                                     entity.insert(quality_setting).with_children(|parent| {
-                                        parent.spawn(TextBundle::from_section(
-                                            format!("{quality_setting:?}"),
-                                            button_text_style.clone(),
-                                        ));
+                                        parent.spawn(TextBundle {
+                                            text: Text::from_section(
+                                                format!("{quality_setting:?}"),
+                                                button_text_style.clone(),
+                                            ),
+                                            ..default()
+                                        });
                                     });
                                     if *display_quality == quality_setting {
                                         entity.insert(SelectedOption);
@@ -698,14 +722,19 @@ mod menu {
                         parent
                             .spawn((
                                 ButtonBundle {
-                                    style: button_style,
+                                    size_constraints: button_size_constraints,
+                                    spacing: button_spacing,
+                                    layout: button_container_layout,
                                     background_color: NORMAL_BUTTON.into(),
                                     ..default()
                                 },
                                 MenuButtonAction::BackToSettings,
                             ))
                             .with_children(|parent| {
-                                parent.spawn(TextBundle::from_section("Back", button_text_style));
+                                parent.spawn(TextBundle {
+                                    text: Text::from_section("Back", button_text_style),
+                                    ..default()
+                                });
                             });
                     });
             });
@@ -716,11 +745,12 @@ mod menu {
         asset_server: Res<AssetServer>,
         volume: Res<Volume>,
     ) {
-        let button_style = Style {
-            size: Size::new(Val::Px(200.0), Val::Px(65.0)),
-            margin: UiRect::all(Val::Px(20.0)),
-            justify_content: JustifyContent::Center,
+        // Common style for all buttons on this menu
+        let button_size_constraints = SizeConstraints::suggested(Val::Px(200.0), Val::Px(65.0));
+        let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
+        let button_container_layout = FlexContainer {
             align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
             ..default()
         };
         let button_text_style = TextStyle {
@@ -732,8 +762,11 @@ mod menu {
         commands
             .spawn((
                 NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                    size_constraints: SizeConstraints::suggested(
+                        Val::Percent(100.0),
+                        Val::Percent(100.0),
+                    ),
+                    layout: FlexContainer {
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -745,8 +778,8 @@ mod menu {
             .with_children(|parent| {
                 parent
                     .spawn(NodeBundle {
-                        style: Style {
-                            flex_direction: FlexDirection::Column,
+                        layout: FlexContainer {
+                            direction: Direction::Column,
                             align_items: AlignItems::Center,
                             ..default()
                         },
@@ -756,7 +789,7 @@ mod menu {
                     .with_children(|parent| {
                         parent
                             .spawn(NodeBundle {
-                                style: Style {
+                                layout: FlexContainer {
                                     align_items: AlignItems::Center,
                                     ..default()
                                 },
@@ -764,16 +797,18 @@ mod menu {
                                 ..default()
                             })
                             .with_children(|parent| {
-                                parent.spawn(TextBundle::from_section(
-                                    "Volume",
-                                    button_text_style.clone(),
-                                ));
+                                parent.spawn(TextBundle {
+                                    text: Text::from_section("Volume", button_text_style.clone()),
+                                    ..default()
+                                });
                                 for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
                                     let mut entity = parent.spawn(ButtonBundle {
-                                        style: Style {
-                                            size: Size::new(Val::Px(30.0), Val::Px(65.0)),
-                                            ..button_style.clone()
-                                        },
+                                        size_constraints: SizeConstraints::suggested(
+                                            Val::Px(30.0),
+                                            Val::Px(65.0),
+                                        ),
+                                        layout: button_container_layout,
+                                        spacing: button_spacing,
                                         background_color: NORMAL_BUTTON.into(),
                                         ..default()
                                     });
@@ -786,14 +821,19 @@ mod menu {
                         parent
                             .spawn((
                                 ButtonBundle {
-                                    style: button_style,
+                                    size_constraints: button_size_constraints,
+                                    spacing: button_spacing,
+                                    layout: button_container_layout,
                                     background_color: NORMAL_BUTTON.into(),
                                     ..default()
                                 },
                                 MenuButtonAction::BackToSettings,
                             ))
                             .with_children(|parent| {
-                                parent.spawn(TextBundle::from_section("Back", button_text_style));
+                                parent.spawn(TextBundle {
+                                    text: Text::from_section("Back", button_text_style),
+                                    ..default()
+                                });
                             });
                     });
             });
diff --git a/examples/ios/src/lib.rs b/examples/ios/src/lib.rs
index f7474b37433a5..f3bdce1b39cf2 100644
--- a/examples/ios/src/lib.rs
+++ b/examples/ios/src/lib.rs
@@ -98,23 +98,26 @@ fn setup_scene(
     // Test ui
     commands
         .spawn(ButtonBundle {
-            style: Style {
-                justify_content: JustifyContent::Center,
-                align_items: AlignItems::Center,
-                position_type: PositionType::Absolute,
-                position: UiRect {
+            control: LayoutControl {
+                position: Position::Absolute,
+                inset: Inset(UiRect {
                     left: Val::Px(50.0),
                     right: Val::Px(50.0),
                     top: Val::Auto,
                     bottom: Val::Px(50.0),
-                },
+                }),
+                ..default()
+            },
+            layout: FlexContainer {
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
                 ..default()
             },
             ..default()
         })
         .with_children(|b| {
-            b.spawn(
-                TextBundle::from_section(
+            b.spawn(TextBundle {
+                text: Text::from_section(
                     "Test Button",
                     TextStyle {
                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
@@ -122,8 +125,9 @@ fn setup_scene(
                         color: Color::BLACK,
                     },
                 )
-                .with_text_alignment(TextAlignment::Center),
-            );
+                .with_alignment(TextAlignment::Center),
+                ..default()
+            });
         });
 }
 
diff --git a/examples/scene/scene.rs b/examples/scene/scene.rs
index a3210214ad7b9..2e68379ecf17e 100644
--- a/examples/scene/scene.rs
+++ b/examples/scene/scene.rs
@@ -126,18 +126,19 @@ fn save_scene_system(world: &mut World) {
 // text example.
 fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2dBundle::default());
-    commands.spawn(
-        TextBundle::from_section(
+    commands.spawn(TextBundle {
+        text: Text::from_section(
             "Nothing to see in this window! Check the console output!",
             TextStyle {
                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                 font_size: 50.0,
                 color: Color::WHITE,
             },
-        )
-        .with_style(Style {
+        ),
+        child_layout: FlexItem {
             align_self: AlignSelf::FlexEnd,
             ..default()
-        }),
-    );
+        },
+        ..default()
+    });
 }
diff --git a/examples/stress_tests/bevymark.rs b/examples/stress_tests/bevymark.rs
index d536d9721a82e..2f5f95235e038 100644
--- a/examples/stress_tests/bevymark.rs
+++ b/examples/stress_tests/bevymark.rs
@@ -111,25 +111,28 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands.spawn(Camera2dBundle::default());
     commands.spawn((
-        TextBundle::from_sections([
-            text_section(Color::GREEN, "Bird Count"),
-            text_section(Color::CYAN, ""),
-            text_section(Color::GREEN, "\nFPS (raw): "),
-            text_section(Color::CYAN, ""),
-            text_section(Color::GREEN, "\nFPS (SMA): "),
-            text_section(Color::CYAN, ""),
-            text_section(Color::GREEN, "\nFPS (EMA): "),
-            text_section(Color::CYAN, ""),
-        ])
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
-                top: Val::Px(5.0),
-                left: Val::Px(5.0),
+        TextBundle {
+            text: Text::from_sections([
+                text_section(Color::GREEN, "Bird Count"),
+                text_section(Color::CYAN, ""),
+                text_section(Color::GREEN, "\nFPS (raw): "),
+                text_section(Color::CYAN, ""),
+                text_section(Color::GREEN, "\nFPS (SMA): "),
+                text_section(Color::CYAN, ""),
+                text_section(Color::GREEN, "\nFPS (EMA): "),
+                text_section(Color::CYAN, ""),
+            ]),
+            control: LayoutControl {
+                position: Position::Absolute,
+                inset: Inset(UiRect {
+                    top: Val::Px(5.0),
+                    left: Val::Px(5.0),
+                    ..default()
+                }),
                 ..default()
             },
             ..default()
-        }),
+        },
         StatsText,
     ));
 
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index 79c761277e834..cab7db06e1446 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -61,10 +61,7 @@ fn setup(mut commands: Commands, font: Res<UiFont>) {
     commands.spawn(Camera2dBundle::default());
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                ..default()
-            },
+            size_constraints: SizeConstraints::FILL_PARENT,
             ..default()
         })
         .with_children(|commands| {
@@ -88,16 +85,21 @@ fn spawn_button(
     commands
         .spawn((
             ButtonBundle {
-                style: Style {
-                    size: Size::new(Val::Percent(width), Val::Percent(width)),
-
-                    position: UiRect {
+                size_constraints: SizeConstraints::suggested(
+                    Val::Percent(width),
+                    Val::Percent(width),
+                ),
+                control: LayoutControl {
+                    position: Position::Absolute,
+                    inset: Inset(UiRect {
                         bottom: Val::Percent(100.0 / total * i as f32),
                         left: Val::Percent(100.0 / total * j as f32),
                         ..default()
-                    },
+                    }),
+                    ..default()
+                },
+                layout: FlexContainer {
                     align_items: AlignItems::Center,
-                    position_type: PositionType::Absolute,
                     ..default()
                 },
                 background_color: color,
@@ -106,13 +108,16 @@ fn spawn_button(
             IdleColor(color),
         ))
         .with_children(|commands| {
-            commands.spawn(TextBundle::from_section(
-                format!("{i}, {j}"),
-                TextStyle {
-                    font,
-                    font_size: FONT_SIZE,
-                    color: Color::rgb(0.2, 0.2, 0.2),
-                },
-            ));
+            commands.spawn(TextBundle {
+                text: Text::from_section(
+                    format!("{i}, {j}"),
+                    TextStyle {
+                        font,
+                        font_size: FONT_SIZE,
+                        color: Color::rgb(0.2, 0.2, 0.2),
+                    },
+                ),
+                ..default()
+            });
         });
 }
diff --git a/examples/tools/gamepad_viewer.rs b/examples/tools/gamepad_viewer.rs
index ae912192cbfdd..5430445f909c0 100644
--- a/examples/tools/gamepad_viewer.rs
+++ b/examples/tools/gamepad_viewer.rs
@@ -436,16 +436,19 @@ fn setup_connected(mut commands: Commands, font: Res<FontHandle>) {
         font: font.clone(),
     };
     commands.spawn((
-        TextBundle::from_sections([
-            TextSection {
-                value: "Connected Gamepads:\n".to_string(),
-                style: style.clone(),
-            },
-            TextSection {
-                value: "None".to_string(),
-                style,
-            },
-        ]),
+        TextBundle {
+            text: Text::from_sections([
+                TextSection {
+                    value: "Connected Gamepads:\n".to_string(),
+                    style: style.clone(),
+                },
+                TextSection {
+                    value: "None".to_string(),
+                    style,
+                },
+            ]),
+            ..default()
+        },
         ConnectedGamepadsText,
     ));
 }
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index ab8b625e09f94..0ccee95a102b5 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -48,8 +48,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2dBundle::default());
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+            size_constraints: SizeConstraints::FILL_PARENT,
+            layout: FlexContainer {
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
@@ -59,8 +59,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         .with_children(|parent| {
             parent
                 .spawn(ButtonBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                    size_constraints: SizeConstraints::suggested(Val::Px(150.0), Val::Px(65.0)),
+                    layout: FlexContainer {
                         // horizontally center child text
                         justify_content: JustifyContent::Center,
                         // vertically center child text
@@ -71,14 +71,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     ..default()
                 })
                 .with_children(|parent| {
-                    parent.spawn(TextBundle::from_section(
-                        "Button",
-                        TextStyle {
-                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                            font_size: 40.0,
-                            color: Color::rgb(0.9, 0.9, 0.9),
-                        },
-                    ));
+                    parent.spawn(TextBundle {
+                        text: Text::from_section(
+                            "Button",
+                            TextStyle {
+                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                font_size: 40.0,
+                                color: Color::rgb(0.9, 0.9, 0.9),
+                            },
+                        ),
+                        ..default()
+                    });
                 });
         });
 }
diff --git a/examples/ui/font_atlas_debug.rs b/examples/ui/font_atlas_debug.rs
index 8dd72311c48f6..f4131297c1a66 100644
--- a/examples/ui/font_atlas_debug.rs
+++ b/examples/ui/font_atlas_debug.rs
@@ -39,7 +39,7 @@ fn atlas_render_system(
 ) {
     if let Some(set) = font_atlas_sets.get(&state.handle.cast_weak::<FontAtlasSet>()) {
         if let Some((_size, font_atlas)) = set.iter().next() {
-            let x_offset = state.atlas_count as f32;
+            let x_inset = state.atlas_count as f32;
             if state.atlas_count == font_atlas.len() as u32 {
                 return;
             }
@@ -49,13 +49,13 @@ fn atlas_render_system(
             state.atlas_count += 1;
             commands.spawn(ImageBundle {
                 image: texture_atlas.texture.clone().into(),
-                style: Style {
-                    position_type: PositionType::Absolute,
-                    position: UiRect {
+                control: LayoutControl {
+                    position: Position::Absolute,
+                    inset: Inset(UiRect {
                         top: Val::Px(0.0),
-                        left: Val::Px(512.0 * x_offset),
+                        left: Val::Px(512.0 * x_inset),
                         ..default()
-                    },
+                    }),
                     ..default()
                 },
                 ..default()
@@ -85,24 +85,27 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut state: ResM
     commands
         .spawn(NodeBundle {
             background_color: Color::NONE.into(),
-            style: Style {
-                position_type: PositionType::Absolute,
-                position: UiRect {
+            control: LayoutControl {
+                position: Position::Absolute,
+                inset: Inset(UiRect {
                     bottom: Val::Px(0.0),
                     ..default()
-                },
+                }),
                 ..default()
             },
             ..default()
         })
         .with_children(|parent| {
-            parent.spawn(TextBundle::from_section(
-                "a",
-                TextStyle {
-                    font: font_handle,
-                    font_size: 60.0,
-                    color: Color::YELLOW,
-                },
-            ));
+            parent.spawn(TextBundle {
+                text: Text::from_section(
+                    "a",
+                    TextStyle {
+                        font: font_handle,
+                        font_size: 60.0,
+                        color: Color::YELLOW,
+                    },
+                ),
+                ..default()
+            });
         });
 }
diff --git a/examples/ui/relative_cursor_position.rs b/examples/ui/relative_cursor_position.rs
index a02a5b3a2d7d5..423b88d32e5e3 100644
--- a/examples/ui/relative_cursor_position.rs
+++ b/examples/ui/relative_cursor_position.rs
@@ -17,11 +17,11 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                align_items: AlignItems::Center,
+            size_constraints: SizeConstraints::FILL_PARENT,
+            layout: FlexContainer {
                 justify_content: JustifyContent::Center,
-                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::Center,
+                direction: Direction::Column,
                 ..default()
             },
             ..default()
@@ -29,11 +29,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         .with_children(|parent| {
             parent
                 .spawn(NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(250.0), Val::Px(250.0)),
-                        margin: UiRect::new(Val::Px(0.), Val::Px(0.), Val::Px(0.), Val::Px(15.)),
-                        ..default()
-                    },
+                    size_constraints: SizeConstraints::suggested(Val::Px(250.0), Val::Px(250.0)),
+                    spacing: Spacing::margin(UiRect::bottom(Val::Px(15.0))),
                     background_color: Color::rgb(235., 35., 12.).into(),
                     ..default()
                 })
diff --git a/examples/ui/text.rs b/examples/ui/text.rs
index a25da20132d02..c924f30d82694 100644
--- a/examples/ui/text.rs
+++ b/examples/ui/text.rs
@@ -32,46 +32,57 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // Text with one section
     commands.spawn((
         // Create a TextBundle that has a Text with a single section.
-        TextBundle::from_section(
-            // Accepts a `String` or any type that converts into a `String`, such as `&str`
-            "hello\nbevy!",
-            TextStyle {
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                font_size: 100.0,
-                color: Color::WHITE,
+        TextBundle {
+            text: Text::from_section(
+                // Accepts a `String` or any type that converts into a `String`, such as `&str`
+                "hello\nbevy!",
+                TextStyle {
+                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                    font_size: 100.0,
+                    color: Color::WHITE,
+                },
+            )
+            // Set the alignment of the Text
+            .with_alignment(TextAlignment::Center),
+            // Set the style of the TextBundle itself.
+            child_layout: FlexItem {
+                align_self: AlignSelf::FlexEnd,
+                ..default()
             },
-        ) // Set the alignment of the Text
-        .with_text_alignment(TextAlignment::Center)
-        // Set the style of the TextBundle itself.
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
-                bottom: Val::Px(5.0),
-                right: Val::Px(15.0),
+            control: LayoutControl {
+                position: Position::Absolute,
+                inset: Inset(UiRect {
+                    bottom: Val::Px(5.0),
+                    right: Val::Px(15.0),
+                    ..default()
+                }),
                 ..default()
             },
             ..default()
-        }),
+        },
         ColorText,
     ));
     // Text with multiple sections
     commands.spawn((
         // Create a TextBundle that has a Text with a list of sections.
-        TextBundle::from_sections([
-            TextSection::new(
-                "FPS: ",
-                TextStyle {
-                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+        TextBundle {
+            text: Text::from_sections([
+                TextSection::new(
+                    "FPS: ",
+                    TextStyle {
+                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                        font_size: 60.0,
+                        color: Color::WHITE,
+                    },
+                ),
+                TextSection::from_style(TextStyle {
+                    font: asset_server.load("fonts/FiraMono-Medium.ttf"),
                     font_size: 60.0,
-                    color: Color::WHITE,
-                },
-            ),
-            TextSection::from_style(TextStyle {
-                font: asset_server.load("fonts/FiraMono-Medium.ttf"),
-                font_size: 60.0,
-                color: Color::GOLD,
-            }),
-        ]),
+                    color: Color::GOLD,
+                }),
+            ]),
+            ..default()
+        },
         FpsText,
     ));
 }
diff --git a/examples/ui/text_debug.rs b/examples/ui/text_debug.rs
index 012affe9528ca..18c54003db1fb 100644
--- a/examples/ui/text_debug.rs
+++ b/examples/ui/text_debug.rs
@@ -27,128 +27,132 @@ struct TextChanges;
 fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
     let font = asset_server.load("fonts/FiraSans-Bold.ttf");
     commands.spawn(Camera2dBundle::default());
-    commands.spawn(
-        TextBundle::from_section(
+    commands.spawn(TextBundle {
+        text: Text::from_section(
             "This is\ntext with\nline breaks\nin the top left",
             TextStyle {
                 font: font.clone(),
                 font_size: 50.0,
                 color: Color::WHITE,
             },
-        )
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
+        ),
+        control: LayoutControl {
+            position: Position::Absolute,
+            inset: Inset(UiRect {
                 top: Val::Px(5.0),
                 left: Val::Px(15.0),
                 ..default()
-            },
+            }),
             ..default()
-        }),
-    );
-    commands.spawn(TextBundle::from_section(
+        },
+        ..default()
+    });
+    commands.spawn(
+        TextBundle {
+            text: Text::from_section(
             "This text is very long, has a limited width, is centred, is positioned in the top right and is also coloured pink.",
             TextStyle {
                 font: font.clone(),
                 font_size: 50.0,
                 color: Color::rgb(0.8, 0.2, 0.7),
-            },
-        )
-        .with_text_alignment(TextAlignment::Center)
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
-                top: Val::Px(5.0),
-                right: Val::Px(15.0),
+            }).with_alignment(TextAlignment::Center),
+            control: LayoutControl {
+                position: Position::Absolute,
+                inset: Inset(UiRect {
+                    top: Val::Px(5.0),
+                    right: Val::Px(15.0),
+                    ..default()
+                }),
                 ..default()
             },
-            max_size: Size {
-                width: Val::Px(400.),
-                height: Val::Undefined,
-            },
+            size_constraints: SizeConstraints::max(Val::Px(400.), Val::Undefined),
             ..default()
-        })
+        }
     );
     commands.spawn((
-        TextBundle::from_sections([
-            TextSection::new(
-                "This text changes in the bottom right",
-                TextStyle {
+        TextBundle {
+            text: Text::from_sections([
+                TextSection::new(
+                    "This text changes in the bottom right",
+                    TextStyle {
+                        font: font.clone(),
+                        font_size: 30.0,
+                        color: Color::WHITE,
+                    },
+                ),
+                TextSection::new(
+                    "\nThis text changes in the bottom right - ",
+                    TextStyle {
+                        font: font.clone(),
+                        font_size: 30.0,
+                        color: Color::RED,
+                    },
+                ),
+                TextSection::from_style(TextStyle {
                     font: font.clone(),
                     font_size: 30.0,
-                    color: Color::WHITE,
-                },
-            ),
-            TextSection::new(
-                "\nThis text changes in the bottom right - ",
-                TextStyle {
+                    color: Color::ORANGE_RED,
+                }),
+                TextSection::new(
+                    " fps, ",
+                    TextStyle {
+                        font: font.clone(),
+                        font_size: 30.0,
+                        color: Color::YELLOW,
+                    },
+                ),
+                TextSection::from_style(TextStyle {
                     font: font.clone(),
                     font_size: 30.0,
-                    color: Color::RED,
-                },
-            ),
-            TextSection::from_style(TextStyle {
-                font: font.clone(),
-                font_size: 30.0,
-                color: Color::ORANGE_RED,
-            }),
-            TextSection::new(
-                " fps, ",
-                TextStyle {
-                    font: font.clone(),
-                    font_size: 30.0,
-                    color: Color::YELLOW,
-                },
-            ),
-            TextSection::from_style(TextStyle {
-                font: font.clone(),
-                font_size: 30.0,
-                color: Color::GREEN,
-            }),
-            TextSection::new(
-                " ms/frame",
-                TextStyle {
-                    font: font.clone(),
-                    font_size: 30.0,
-                    color: Color::BLUE,
-                },
-            ),
-        ])
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
-                bottom: Val::Px(5.0),
-                right: Val::Px(15.0),
+                    color: Color::GREEN,
+                }),
+                TextSection::new(
+                    " ms/frame",
+                    TextStyle {
+                        font: font.clone(),
+                        font_size: 30.0,
+                        color: Color::BLUE,
+                    },
+                ),
+            ]),
+            control: LayoutControl {
+                position: Position::Absolute,
+                inset: Inset(UiRect {
+                    bottom: Val::Px(5.0),
+                    right: Val::Px(15.0),
+                    ..default()
+                }),
                 ..default()
             },
             ..default()
-        }),
+        },
         TextChanges,
     ));
-    commands.spawn(
-        TextBundle::from_section(
+    commands.spawn(TextBundle {
+        text: Text::from_section(
             "This\ntext has\nline breaks and also a set width in the bottom left",
             TextStyle {
                 font,
                 font_size: 50.0,
                 color: Color::WHITE,
             },
-        )
-        .with_style(Style {
-            align_self: AlignSelf::FlexEnd,
-            position_type: PositionType::Absolute,
-            position: UiRect {
+        ),
+        control: LayoutControl {
+            position: Position::Absolute,
+            inset: Inset(UiRect {
                 bottom: Val::Px(5.0),
                 left: Val::Px(15.0),
                 ..default()
-            },
-            size: Size {
-                width: Val::Px(200.0),
-                ..default()
-            },
+            }),
             ..default()
-        }),
-    );
+        },
+        child_layout: FlexItem {
+            align_self: AlignSelf::FlexEnd,
+            ..default()
+        },
+        size_constraints: SizeConstraints::suggested(Val::Px(200.), Val::default()),
+        ..default()
+    });
 }
 
 fn change_text_system(
diff --git a/examples/ui/transparency_ui.rs b/examples/ui/transparency_ui.rs
index a70193b94078c..6382ce6e4c2dc 100644
--- a/examples/ui/transparency_ui.rs
+++ b/examples/ui/transparency_ui.rs
@@ -18,8 +18,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(50.0), Val::Percent(100.0)),
+            size_constraints: SizeConstraints::suggested(Val::Percent(50.0), Val::Percent(100.0)),
+            layout: FlexContainer {
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
@@ -29,8 +29,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         .with_children(|parent| {
             parent
                 .spawn(ButtonBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                    size_constraints: SizeConstraints::suggested(Val::Px(150.0), Val::Px(65.0)),
+                    layout: FlexContainer {
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::Center,
                         ..default()
@@ -39,22 +39,25 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     ..default()
                 })
                 .with_children(|parent| {
-                    parent.spawn(TextBundle::from_section(
-                        "Button 1",
-                        TextStyle {
-                            font: font_handle.clone(),
-                            font_size: 40.0,
-                            // Alpha channel of the color controls transparency.
-                            color: Color::rgba(1.0, 1.0, 1.0, 0.2),
-                        },
-                    ));
+                    parent.spawn(TextBundle {
+                        text: Text::from_section(
+                            "Button 1",
+                            TextStyle {
+                                font: font_handle.clone(),
+                                font_size: 40.0,
+                                // Alpha channel of the color controls transparency.
+                                color: Color::rgba(1.0, 1.0, 1.0, 0.2),
+                            },
+                        ),
+                        ..default()
+                    });
                 });
         });
 
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(50.0), Val::Percent(100.0)),
+            size_constraints: SizeConstraints::suggested(Val::Percent(50.0), Val::Percent(100.0)),
+            layout: FlexContainer {
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
@@ -66,8 +69,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             // to demonstrate the text looks different due to its transparency.
             parent
                 .spawn(ButtonBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                    size_constraints: SizeConstraints::suggested(Val::Px(150.0), Val::Px(65.0)),
+                    layout: FlexContainer {
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::Center,
                         ..default()
@@ -76,15 +79,18 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     ..default()
                 })
                 .with_children(|parent| {
-                    parent.spawn(TextBundle::from_section(
-                        "Button 2",
-                        TextStyle {
-                            font: font_handle.clone(),
-                            font_size: 40.0,
-                            // Alpha channel of the color controls transparency.
-                            color: Color::rgba(1.0, 1.0, 1.0, 0.2),
-                        },
-                    ));
+                    parent.spawn(TextBundle {
+                        text: Text::from_section(
+                            "Button 2",
+                            TextStyle {
+                                font: font_handle.clone(),
+                                font_size: 40.0,
+                                // Alpha channel of the color controls transparency.
+                                color: Color::rgba(1.0, 1.0, 1.0, 0.2),
+                            },
+                        ),
+                        ..default()
+                    });
                 });
         });
 }
diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
index 08d5a710f9dfc..0f8231966b67a 100644
--- a/examples/ui/ui.rs
+++ b/examples/ui/ui.rs
@@ -23,8 +23,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // root node
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+            size_constraints: SizeConstraints::FILL_PARENT,
+            layout: FlexContainer {
                 justify_content: JustifyContent::SpaceBetween,
                 ..default()
             },
@@ -34,11 +34,11 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             // left vertical fill (border)
             parent
                 .spawn(NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(200.0), Val::Percent(100.0)),
-                        border: UiRect::all(Val::Px(2.0)),
-                        ..default()
-                    },
+                    size_constraints: SizeConstraints::suggested(
+                        Val::Px(200.0),
+                        Val::Percent(100.0),
+                    ),
+                    spacing: Spacing::border_all(Val::Px(2.0)),
                     background_color: Color::rgb(0.65, 0.65, 0.65).into(),
                     ..default()
                 })
@@ -46,38 +46,36 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     // left vertical fill (content)
                     parent
                         .spawn(NodeBundle {
-                            style: Style {
-                                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                                ..default()
-                            },
+                            size_constraints: SizeConstraints::FILL_PARENT,
                             background_color: Color::rgb(0.15, 0.15, 0.15).into(),
                             ..default()
                         })
                         .with_children(|parent| {
                             // text
-                            parent.spawn(
-                                TextBundle::from_section(
+                            parent.spawn(TextBundle {
+                                text: Text::from_section(
                                     "Text Example",
                                     TextStyle {
                                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                         font_size: 30.0,
                                         color: Color::WHITE,
                                     },
-                                )
-                                .with_style(Style {
-                                    margin: UiRect::all(Val::Px(5.0)),
-                                    ..default()
-                                }),
-                            );
+                                ),
+                                spacing: Spacing::margin_all(Val::Px(5.0)),
+                                ..default()
+                            });
                         });
                 });
             // right vertical fill
             parent
                 .spawn(NodeBundle {
-                    style: Style {
-                        flex_direction: FlexDirection::Column,
+                    size_constraints: SizeConstraints::suggested(
+                        Val::Px(200.0),
+                        Val::Percent(100.0),
+                    ),
+                    layout: FlexContainer {
+                        direction: Direction::Column,
                         justify_content: JustifyContent::Center,
-                        size: Size::new(Val::Px(200.0), Val::Percent(100.0)),
                         ..default()
                     },
                     background_color: Color::rgb(0.15, 0.15, 0.15).into(),
@@ -85,35 +83,38 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 })
                 .with_children(|parent| {
                     // Title
-                    parent.spawn(
-                        TextBundle::from_section(
+                    parent.spawn(TextBundle {
+                        text: Text::from_section(
                             "Scrolling list",
                             TextStyle {
                                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                 font_size: 25.,
                                 color: Color::WHITE,
                             },
-                        )
-                        .with_style(Style {
-                            size: Size::new(Val::Undefined, Val::Px(25.)),
-                            margin: UiRect {
-                                left: Val::Auto,
-                                right: Val::Auto,
-                                ..default()
-                            },
-                            ..default()
-                        }),
-                    );
+                        ),
+                        spacing: Spacing::margin(UiRect::horizontal(Val::Auto)),
+                        size_constraints: SizeConstraints::suggested(Val::Undefined, Val::Px(25.)),
+                        ..default()
+                    });
                     // List with hidden overflow
                     parent
                         .spawn(NodeBundle {
-                            style: Style {
-                                flex_direction: FlexDirection::Column,
-                                align_self: AlignSelf::Center,
-                                size: Size::new(Val::Percent(100.0), Val::Percent(50.0)),
+                            size_constraints: SizeConstraints::suggested(
+                                Val::Percent(100.0),
+                                Val::Percent(50.0),
+                            ),
+                            control: LayoutControl {
                                 overflow: Overflow::Hidden,
                                 ..default()
                             },
+                            layout: FlexContainer {
+                                direction: Direction::Column,
+                                ..default()
+                            },
+                            child_layout: FlexItem {
+                                align_self: AlignSelf::Center,
+                                ..default()
+                            },
                             background_color: Color::rgb(0.10, 0.10, 0.10).into(),
                             ..default()
                         })
@@ -122,10 +123,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             parent
                                 .spawn((
                                     NodeBundle {
-                                        style: Style {
-                                            flex_direction: FlexDirection::Column,
-                                            flex_grow: 1.0,
-                                            max_size: Size::UNDEFINED,
+                                        size_constraints: SizeConstraints::max(
+                                            Val::Undefined,
+                                            Val::Undefined,
+                                        ),
+                                        layout: FlexContainer {
+                                            direction: Direction::Column,
+                                            ..default()
+                                        },
+                                        child_layout: FlexItem {
+                                            grow: 1.0,
                                             ..default()
                                         },
                                         ..default()
@@ -135,8 +142,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 .with_children(|parent| {
                                     // List items
                                     for i in 0..30 {
-                                        parent.spawn(
-                                            TextBundle::from_section(
+                                        parent.spawn(TextBundle {
+                                            text: Text::from_section(
                                                 format!("Item {i}"),
                                                 TextStyle {
                                                     font: asset_server
@@ -144,44 +151,46 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                                     font_size: 20.,
                                                     color: Color::WHITE,
                                                 },
-                                            )
-                                            .with_style(Style {
-                                                flex_shrink: 0.,
-                                                size: Size::new(Val::Undefined, Val::Px(20.)),
-                                                margin: UiRect {
-                                                    left: Val::Auto,
-                                                    right: Val::Auto,
-                                                    ..default()
-                                                },
+                                            ),
+                                            child_layout: FlexItem {
+                                                shrink: 0.,
                                                 ..default()
-                                            }),
-                                        );
+                                            },
+                                            spacing: Spacing::margin(UiRect::new(
+                                                Val::Auto,
+                                                Val::Auto,
+                                                Val::Undefined,
+                                                Val::Undefined,
+                                            )),
+                                            size_constraints: SizeConstraints::suggested(
+                                                Val::Undefined,
+                                                Val::Px(20.),
+                                            ),
+                                            ..default()
+                                        });
                                     }
                                 });
                         });
                 });
             parent
                 .spawn(NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(200.0), Val::Px(200.0)),
-                        position_type: PositionType::Absolute,
-                        position: UiRect {
+                    size_constraints: SizeConstraints::suggested(Val::Px(200.0), Val::Px(200.0)),
+                    control: LayoutControl {
+                        position: Position::Absolute,
+                        inset: Inset(UiRect {
                             left: Val::Px(210.0),
                             bottom: Val::Px(10.0),
                             ..default()
-                        },
-                        border: UiRect::all(Val::Px(20.0)),
+                        }),
                         ..default()
                     },
+                    spacing: Spacing::border(UiRect::all(Val::Px(20.0))),
                     background_color: Color::rgb(0.4, 0.4, 1.0).into(),
                     ..default()
                 })
                 .with_children(|parent| {
                     parent.spawn(NodeBundle {
-                        style: Style {
-                            size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                            ..default()
-                        },
+                        size_constraints: SizeConstraints::FILL_PARENT,
                         background_color: Color::rgb(0.8, 0.8, 1.0).into(),
                         ..default()
                     });
@@ -189,9 +198,12 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             // render order test: reddest in the back, whitest in the front (flex center)
             parent
                 .spawn(NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                        position_type: PositionType::Absolute,
+                    size_constraints: SizeConstraints::FILL_PARENT,
+                    control: LayoutControl {
+                        position: Position::Absolute,
+                        ..default()
+                    },
+                    layout: FlexContainer {
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -201,51 +213,48 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .with_children(|parent| {
                     parent
                         .spawn(NodeBundle {
-                            style: Style {
-                                size: Size::new(Val::Px(100.0), Val::Px(100.0)),
-                                ..default()
-                            },
+                            size_constraints: SizeConstraints::FILL_PARENT,
                             background_color: Color::rgb(1.0, 0.0, 0.0).into(),
                             ..default()
                         })
                         .with_children(|parent| {
                             parent.spawn(NodeBundle {
-                                style: Style {
-                                    size: Size::new(Val::Px(100.0), Val::Px(100.0)),
-                                    position_type: PositionType::Absolute,
-                                    position: UiRect {
+                                size_constraints: SizeConstraints::FILL_PARENT,
+                                control: LayoutControl {
+                                    position: Position::Absolute,
+                                    inset: Inset(UiRect {
                                         left: Val::Px(20.0),
                                         bottom: Val::Px(20.0),
                                         ..default()
-                                    },
+                                    }),
                                     ..default()
                                 },
                                 background_color: Color::rgb(1.0, 0.3, 0.3).into(),
                                 ..default()
                             });
                             parent.spawn(NodeBundle {
-                                style: Style {
-                                    size: Size::new(Val::Px(100.0), Val::Px(100.0)),
-                                    position_type: PositionType::Absolute,
-                                    position: UiRect {
+                                size_constraints: SizeConstraints::FILL_PARENT,
+                                control: LayoutControl {
+                                    position: Position::Absolute,
+                                    inset: Inset(UiRect {
                                         left: Val::Px(40.0),
                                         bottom: Val::Px(40.0),
                                         ..default()
-                                    },
+                                    }),
                                     ..default()
                                 },
                                 background_color: Color::rgb(1.0, 0.5, 0.5).into(),
                                 ..default()
                             });
                             parent.spawn(NodeBundle {
-                                style: Style {
-                                    size: Size::new(Val::Px(100.0), Val::Px(100.0)),
-                                    position_type: PositionType::Absolute,
-                                    position: UiRect {
+                                size_constraints: SizeConstraints::FILL_PARENT,
+                                control: LayoutControl {
+                                    position: Position::Absolute,
+                                    inset: Inset(UiRect {
                                         left: Val::Px(60.0),
                                         bottom: Val::Px(60.0),
                                         ..default()
-                                    },
+                                    }),
                                     ..default()
                                 },
                                 background_color: Color::rgb(1.0, 0.7, 0.7).into(),
@@ -253,14 +262,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             });
                             // alpha test
                             parent.spawn(NodeBundle {
-                                style: Style {
-                                    size: Size::new(Val::Px(100.0), Val::Px(100.0)),
-                                    position_type: PositionType::Absolute,
-                                    position: UiRect {
+                                size_constraints: SizeConstraints::suggested(
+                                    Val::Px(100.0),
+                                    Val::Px(100.0),
+                                ),
+                                control: LayoutControl {
+                                    position: Position::Absolute,
+                                    inset: Inset(UiRect {
                                         left: Val::Px(80.0),
                                         bottom: Val::Px(80.0),
                                         ..default()
-                                    },
+                                    }),
                                     ..default()
                                 },
                                 background_color: Color::rgba(1.0, 0.9, 0.9, 0.4).into(),
@@ -271,9 +283,12 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             // bevy logo (flex center)
             parent
                 .spawn(NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-                        position_type: PositionType::Absolute,
+                    size_constraints: SizeConstraints::FILL_PARENT,
+                    control: LayoutControl {
+                        position: Position::Absolute,
+                        ..default()
+                    },
+                    layout: FlexContainer {
                         justify_content: JustifyContent::Center,
                         align_items: AlignItems::FlexStart,
                         ..default()
@@ -283,10 +298,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .with_children(|parent| {
                     // bevy logo (image)
                     parent.spawn(ImageBundle {
-                        style: Style {
-                            size: Size::new(Val::Px(500.0), Val::Auto),
-                            ..default()
-                        },
+                        size_constraints: SizeConstraints::suggested(Val::Px(500.0), Val::Auto),
                         image: asset_server.load("branding/bevy_logo_dark_big.png").into(),
                         ..default()
                     });
@@ -301,11 +313,11 @@ struct ScrollingList {
 
 fn mouse_scroll(
     mut mouse_wheel_events: EventReader<MouseWheel>,
-    mut query_list: Query<(&mut ScrollingList, &mut Style, &Children, &Node)>,
+    mut query_list: Query<(&mut ScrollingList, &mut LayoutControl, &Children, &Node)>,
     query_item: Query<&Node>,
 ) {
     for mouse_wheel_event in mouse_wheel_events.iter() {
-        for (mut scrolling_list, mut style, children, uinode) in &mut query_list {
+        for (mut scrolling_list, mut control, children, uinode) in &mut query_list {
             let items_height: f32 = children
                 .iter()
                 .map(|entity| query_item.get(*entity).unwrap().size().y)
@@ -318,7 +330,7 @@ fn mouse_scroll(
             };
             scrolling_list.position += dy;
             scrolling_list.position = scrolling_list.position.clamp(-max_scroll, 0.);
-            style.position.top = Val::Px(scrolling_list.position);
+            control.inset.top = Val::Px(scrolling_list.position);
         }
     }
 }
diff --git a/examples/ui/ui_scaling.rs b/examples/ui/ui_scaling.rs
index 008a992060a19..a33c8d11f769b 100644
--- a/examples/ui/ui_scaling.rs
+++ b/examples/ui/ui_scaling.rs
@@ -36,16 +36,19 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
 
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(50.0), Val::Percent(50.0)),
-                position_type: PositionType::Absolute,
-                position: UiRect {
+            size_constraints: SizeConstraints::suggested(Val::Percent(50.0), Val::Percent(50.0)),
+            control: LayoutControl {
+                position: Position::Absolute,
+                inset: Inset(UiRect {
                     left: Val::Percent(25.),
                     top: Val::Percent(25.),
                     ..default()
-                },
-                justify_content: JustifyContent::SpaceAround,
+                }),
+                ..default()
+            },
+            layout: FlexContainer {
                 align_items: AlignItems::Center,
+                justify_content: JustifyContent::SpaceAround,
                 ..default()
             },
             background_color: Color::ANTIQUE_WHITE.into(),
@@ -54,29 +57,26 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
         .with_children(|parent| {
             parent
                 .spawn(NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(40.), Val::Px(40.)),
-                        ..default()
-                    },
+                    size_constraints: SizeConstraints::suggested(Val::Px(40.0), Val::Px(40.0)),
                     background_color: Color::RED.into(),
                     ..default()
                 })
                 .with_children(|parent| {
-                    parent.spawn(TextBundle::from_section("Size!", text_style));
+                    parent.spawn(TextBundle {
+                        text: Text::from_section("Size!", text_style),
+                        ..default()
+                    });
                 });
             parent.spawn(NodeBundle {
-                style: Style {
-                    size: Size::new(Val::Percent(15.), Val::Percent(15.)),
-                    ..default()
-                },
+                size_constraints: SizeConstraints::suggested(
+                    Val::Percent(15.0),
+                    Val::Percent(15.0),
+                ),
                 background_color: Color::BLUE.into(),
                 ..default()
             });
             parent.spawn(ImageBundle {
-                style: Style {
-                    size: Size::new(Val::Px(30.0), Val::Px(30.0)),
-                    ..default()
-                },
+                size_constraints: SizeConstraints::suggested(Val::Px(30.0), Val::Px(30.0)),
                 image: asset_server.load("branding/icon.png").into(),
                 ..default()
             });
diff --git a/examples/ui/window_fallthrough.rs b/examples/ui/window_fallthrough.rs
index 82cc275501954..712fc0e4b4559 100644
--- a/examples/ui/window_fallthrough.rs
+++ b/examples/ui/window_fallthrough.rs
@@ -25,28 +25,31 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // UI camera
     commands.spawn(Camera2dBundle::default());
     // Text with one section
-    commands.spawn((
+    commands.spawn(
         // Create a TextBundle that has a Text with a single section.
-        TextBundle::from_section(
-            // Accepts a `String` or any type that converts into a `String`, such as `&str`
-            "Hit 'P' then scroll/click around!",
-            TextStyle {
-                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                font_size: 100.0, // Nice and big so you can see it!
-                color: Color::WHITE,
-            },
-        )
-        // Set the style of the TextBundle itself.
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
-                bottom: Val::Px(5.),
-                right: Val::Px(10.),
+        TextBundle {
+            text: Text::from_section(
+                // Accepts a `String` or any type that converts into a `String`, such as `&str`
+                "Hit 'P' then scroll/click around!",
+                TextStyle {
+                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                    font_size: 100.0, // Nice and big so you can see it!
+                    color: Color::WHITE,
+                },
+            ),
+            // Set the style of the TextBundle itself.
+            control: LayoutControl {
+                position: Position::Absolute,
+                inset: Inset(UiRect {
+                    bottom: Val::Px(5.),
+                    right: Val::Px(10.),
+                    ..default()
+                }),
                 ..default()
             },
             ..default()
-        }),
-    ));
+        },
+    );
 }
 // A simple system to handle some keyboard input and toggle on/off the hittest.
 fn toggle_mouse_passthrough(keyboard_input: Res<Input<KeyCode>>, mut windows: Query<&mut Window>) {
diff --git a/examples/ui/z_index.rs b/examples/ui/z_index.rs
index d15f5dcbeb1f9..9d8393690fef1 100644
--- a/examples/ui/z_index.rs
+++ b/examples/ui/z_index.rs
@@ -21,114 +21,111 @@ fn setup(mut commands: Commands) {
     // because this is a root UI node, using local or global values will do the same thing.
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+            size_constraints: SizeConstraints::FILL_PARENT,
+            layout: FlexContainer {
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 ..default()
             },
             ..default()
         })
-        .with_children(|parent| {
-            parent
-                .spawn(NodeBundle {
-                    background_color: Color::GRAY.into(),
-                    style: Style {
-                        size: Size::new(Val::Px(180.0), Val::Px(100.0)),
+        .with_children(|root| {
+            root.spawn(NodeBundle {
+                background_color: Color::GRAY.into(),
+                size_constraints: SizeConstraints::suggested(Val::Px(180.0), Val::Px(100.0)),
+                spacing: Spacing::AUTO_MARGIN,
+                ..default()
+            })
+            .with_children(|parent| {
+                // spawn a node with default z-index.
+                parent.spawn(NodeBundle {
+                    background_color: Color::RED.into(),
+                    control: LayoutControl {
+                        position: Position::Absolute,
+                        inset: Inset(UiRect {
+                            left: Val::Px(10.0),
+                            bottom: Val::Px(40.0),
+                            ..default()
+                        }),
                         ..default()
                     },
+                    size_constraints: SizeConstraints::suggested(Val::Px(100.0), Val::Px(50.0)),
                     ..default()
-                })
-                .with_children(|parent| {
-                    // spawn a node with default z-index.
-                    parent.spawn(NodeBundle {
-                        background_color: Color::RED.into(),
-                        style: Style {
-                            position_type: PositionType::Absolute,
-                            position: UiRect {
-                                left: Val::Px(10.0),
-                                bottom: Val::Px(40.0),
-                                ..default()
-                            },
-                            size: Size::new(Val::Px(100.0), Val::Px(50.0)),
-                            ..default()
-                        },
-                        ..default()
-                    });
+                });
 
-                    // spawn a node with a positive local z-index of 2.
-                    // it will show above other nodes in the grey container.
-                    parent.spawn(NodeBundle {
-                        z_index: ZIndex::Local(2),
-                        background_color: Color::BLUE.into(),
-                        style: Style {
-                            position_type: PositionType::Absolute,
-                            position: UiRect {
-                                left: Val::Px(45.0),
-                                bottom: Val::Px(30.0),
-                                ..default()
-                            },
-                            size: Size::new(Val::Px(100.0), Val::Px(50.0)),
+                // spawn a node with a positive local z-index of 2.
+                // it will show above other nodes in the grey container.
+                parent.spawn(NodeBundle {
+                    z_index: ZIndex::Local(2),
+                    background_color: Color::BLUE.into(),
+                    control: LayoutControl {
+                        position: Position::Absolute,
+                        inset: Inset(UiRect {
+                            left: Val::Px(45.0),
+                            bottom: Val::Px(30.0),
                             ..default()
-                        },
+                        }),
                         ..default()
-                    });
+                    },
+                    size_constraints: SizeConstraints::suggested(Val::Px(100.0), Val::Px(50.0)),
+                    ..default()
+                });
 
-                    // spawn a node with a negative local z-index.
-                    // it will show under other nodes in the grey container.
-                    parent.spawn(NodeBundle {
-                        z_index: ZIndex::Local(-1),
-                        background_color: Color::GREEN.into(),
-                        style: Style {
-                            position_type: PositionType::Absolute,
-                            position: UiRect {
-                                left: Val::Px(70.0),
-                                bottom: Val::Px(20.0),
-                                ..default()
-                            },
-                            size: Size::new(Val::Px(100.0), Val::Px(75.0)),
+                // spawn a node with a negative local z-index.
+                // it will show under other nodes in the grey container.
+                parent.spawn(NodeBundle {
+                    z_index: ZIndex::Local(-1),
+                    background_color: Color::GREEN.into(),
+                    control: LayoutControl {
+                        position: Position::Absolute,
+                        inset: Inset(UiRect {
+                            left: Val::Px(70.0),
+                            bottom: Val::Px(20.0),
                             ..default()
-                        },
+                        }),
                         ..default()
-                    });
+                    },
+                    size_constraints: SizeConstraints::suggested(Val::Px(100.0), Val::Px(75.0)),
+                    ..default()
+                });
 
-                    // spawn a node with a positive global z-index of 1.
-                    // it will show above all other nodes, because it's the highest global z-index in this example.
-                    // by default, boxes all share the global z-index of 0 that the grey container is added to.
-                    parent.spawn(NodeBundle {
-                        z_index: ZIndex::Global(1),
-                        background_color: Color::PURPLE.into(),
-                        style: Style {
-                            position_type: PositionType::Absolute,
-                            position: UiRect {
-                                left: Val::Px(15.0),
-                                bottom: Val::Px(10.0),
-                                ..default()
-                            },
-                            size: Size::new(Val::Px(100.0), Val::Px(60.0)),
+                // spawn a node with a positive global z-index of 1.
+                // it will show above all other nodes, because it's the highest global z-index in this example.
+                // by default, boxes all share the global z-index of 0 that the grey container is added to.
+                parent.spawn(NodeBundle {
+                    z_index: ZIndex::Global(1),
+                    background_color: Color::PURPLE.into(),
+                    control: LayoutControl {
+                        position: Position::Absolute,
+                        inset: Inset(UiRect {
+                            left: Val::Px(15.0),
+                            bottom: Val::Px(10.0),
                             ..default()
-                        },
+                        }),
                         ..default()
-                    });
+                    },
+                    size_constraints: SizeConstraints::suggested(Val::Px(100.0), Val::Px(60.0)),
+                    ..default()
+                });
 
-                    // spawn a node with a negative global z-index of -1.
-                    // this will show under all other nodes including its parent, because it's the lowest global z-index
-                    // in this example.
-                    parent.spawn(NodeBundle {
-                        z_index: ZIndex::Global(-1),
-                        background_color: Color::YELLOW.into(),
-                        style: Style {
-                            position_type: PositionType::Absolute,
-                            position: UiRect {
-                                left: Val::Px(-15.0),
-                                bottom: Val::Px(-15.0),
-                                ..default()
-                            },
-                            size: Size::new(Val::Px(100.0), Val::Px(125.0)),
+                // spawn a node with a negative global z-index of -1.
+                // this will show under all other nodes including its parent, because it's the lowest global z-index
+                // in this example.
+                parent.spawn(NodeBundle {
+                    z_index: ZIndex::Global(-1),
+                    background_color: Color::YELLOW.into(),
+                    control: LayoutControl {
+                        position: Position::Absolute,
+                        inset: Inset(UiRect {
+                            left: Val::Px(-15.0),
+                            bottom: Val::Px(-15.0),
                             ..default()
-                        },
+                        }),
                         ..default()
-                    });
+                    },
+                    size_constraints: SizeConstraints::suggested(Val::Px(100.0), Val::Px(125.0)),
+                    ..default()
                 });
+            });
         });
 }
diff --git a/examples/window/low_power.rs b/examples/window/low_power.rs
index 0e8ba1e8e3a1d..6d5ce6e8a4f4f 100644
--- a/examples/window/low_power.rs
+++ b/examples/window/low_power.rs
@@ -168,44 +168,50 @@ pub(crate) mod test_setup {
         });
         event.send(RequestRedraw);
         commands.spawn((
-            TextBundle::from_sections([
-                TextSection::new(
-                    "Press spacebar to cycle modes\n",
-                    TextStyle {
+            TextBundle {
+                text: Text::from_sections([
+                    TextSection::new(
+                        "Press spacebar to cycle modes\n",
+                        TextStyle {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 50.0,
+                            color: Color::WHITE,
+                        },
+                    ),
+                    TextSection::from_style(TextStyle {
                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                         font_size: 50.0,
-                        color: Color::WHITE,
-                    },
-                ),
-                TextSection::from_style(TextStyle {
-                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                    font_size: 50.0,
-                    color: Color::GREEN,
-                }),
-                TextSection::new(
-                    "\nFrame: ",
-                    TextStyle {
+                        color: Color::GREEN,
+                    }),
+                    TextSection::new(
+                        "\nFrame: ",
+                        TextStyle {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 50.0,
+                            color: Color::YELLOW,
+                        },
+                    ),
+                    TextSection::from_style(TextStyle {
                         font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                         font_size: 50.0,
                         color: Color::YELLOW,
-                    },
-                ),
-                TextSection::from_style(TextStyle {
-                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                    font_size: 50.0,
-                    color: Color::YELLOW,
-                }),
-            ])
-            .with_style(Style {
-                align_self: AlignSelf::FlexStart,
-                position_type: PositionType::Absolute,
-                position: UiRect {
-                    top: Val::Px(5.0),
-                    left: Val::Px(5.0),
+                    }),
+                ]),
+                control: LayoutControl {
+                    position: Position::Absolute,
+                    inset: Inset(UiRect {
+                        top: Val::Px(5.0),
+                        left: Val::Px(5.0),
+                        ..default()
+                    }),
+                    ..default()
+                },
+                child_layout: FlexItem {
+                    align_self: AlignSelf::FlexStart,
                     ..default()
                 },
                 ..default()
-            }),
+            },
             ModeText,
         ));
     }
diff --git a/examples/window/scale_factor_override.rs b/examples/window/scale_factor_override.rs
index 5af87dd416cb8..f26f7898df37d 100644
--- a/examples/window/scale_factor_override.rs
+++ b/examples/window/scale_factor_override.rs
@@ -25,8 +25,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // root node
     commands
         .spawn(NodeBundle {
-            style: Style {
-                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+            size_constraints: SizeConstraints::FILL_PARENT,
+            layout: FlexContainer {
                 justify_content: JustifyContent::SpaceBetween,
                 ..default()
             },
@@ -36,29 +36,27 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             // left vertical fill (border)
             parent
                 .spawn(NodeBundle {
-                    style: Style {
-                        size: Size::new(Val::Px(200.0), Val::Percent(100.0)),
-                        border: UiRect::all(Val::Px(2.0)),
-                        ..default()
-                    },
+                    size_constraints: SizeConstraints::suggested(Val::Px(200.), Val::FULL),
+                    spacing: Spacing::border_all(Val::Px(2.0)),
                     background_color: Color::rgb(0.65, 0.65, 0.65).into(),
                     ..default()
                 })
                 .with_children(|parent| {
-                    parent.spawn(
-                        TextBundle::from_section(
+                    parent.spawn(TextBundle {
+                        text: Text::from_section(
                             "Example text",
                             TextStyle {
                                 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
                                 font_size: 30.0,
                                 color: Color::WHITE,
                             },
-                        )
-                        .with_style(Style {
+                        ),
+                        child_layout: FlexItem {
                             align_self: AlignSelf::FlexEnd,
                             ..default()
-                        }),
-                    );
+                        },
+                        ..default()
+                    });
                 });
         });
 }
diff --git a/examples/window/window_resizing.rs b/examples/window/window_resizing.rs
index bb9a3848bfe4c..8ca72ce04ee52 100644
--- a/examples/window/window_resizing.rs
+++ b/examples/window/window_resizing.rs
@@ -37,23 +37,23 @@ fn setup_camera(mut cmd: Commands) {
 fn setup_ui(mut cmd: Commands, asset_server: Res<AssetServer>) {
     // Node that fills entire background
     cmd.spawn(NodeBundle {
-        style: Style {
-            size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
-            ..default()
-        },
+        size_constraints: SizeConstraints::FILL_PARENT,
         ..default()
     })
     .with_children(|root| {
         // Text where we display current resolution
         root.spawn((
-            TextBundle::from_section(
-                "Resolution",
-                TextStyle {
-                    font: asset_server.load("fonts/FiraMono-Medium.ttf"),
-                    font_size: 50.0,
-                    color: Color::BLACK,
-                },
-            ),
+            TextBundle {
+                text: Text::from_section(
+                    "Resolution",
+                    TextStyle {
+                        font: asset_server.load("fonts/FiraMono-Medium.ttf"),
+                        font_size: 50.0,
+                        color: Color::BLACK,
+                    },
+                ),
+                ..default()
+            },
             ResolutionText,
         ));
     });