diff --git a/Cargo.toml b/Cargo.toml
index c6ec1f14d6bd0..4375754a589ce 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1463,6 +1463,16 @@ description = "Illustrates how FontAtlases are populated (used to optimize text
 category = "UI (User Interface)"
 wasm = true
 
+[[example]]
+name = "layout"
+path = "examples/ui/layout.rs"
+
+[package.metadata.example.layout]
+name = "Layout"
+description = "Creates a more complex UI layout and demonstrates how the different JustifyContent and AlignItems variants compose."
+category = "UI (User Interface)"
+wasm = false
+
 [[example]]
 name = "text"
 path = "examples/ui/text.rs"
diff --git a/crates/bevy_ui/src/flex/mod.rs b/crates/bevy_ui/src/flex/mod.rs
index ebe6e1ad4d394..ec244e4f27181 100644
--- a/crates/bevy_ui/src/flex/mod.rs
+++ b/crates/bevy_ui/src/flex/mod.rs
@@ -4,7 +4,7 @@ use crate::{CalculatedSize, Node, Style, UiScale};
 use bevy_ecs::{
     entity::Entity,
     event::EventReader,
-    query::{Changed, ReadOnlyWorldQuery, With, Without},
+    query::{Changed, With, Without},
     system::{Query, RemovedComponents, Res, ResMut, Resource},
 };
 use bevy_hierarchy::{Children, Parent};
@@ -86,11 +86,15 @@ impl FlexSurface {
                 match (constraints.width, constraints.height) {
                     (Number::Undefined, Number::Undefined) => {}
                     (Number::Defined(width), Number::Undefined) => {
-                        size.height = width * size.height / size.width;
+                        if calculated_size.preserve_aspect_ratio {
+                            size.height = width * size.height / size.width;
+                        }
                         size.width = width;
                     }
                     (Number::Undefined, Number::Defined(height)) => {
-                        size.width = height * size.width / size.height;
+                        if calculated_size.preserve_aspect_ratio {
+                            size.width = height * size.width / size.height;
+                        }
                         size.height = height;
                     }
                     (Number::Defined(width), Number::Defined(height)) => {
@@ -111,6 +115,52 @@ impl FlexSurface {
         }
     }
 
+    fn upsert_widget(
+        &mut self,
+        entity: Entity,
+        calculated_size: CalculatedSize,
+        scale_factor: f64,
+    ) {
+        let taffy = &mut self.taffy;
+        let measure = taffy::node::MeasureFunc::Boxed(Box::new(
+            move |constraints: taffy::geometry::Size<Number>| {
+                let mut size = convert::from_f32_size(scale_factor, calculated_size.size);
+                match (constraints.width, constraints.height) {
+                    (Number::Undefined, Number::Undefined) => {}
+                    (Number::Defined(width), Number::Undefined) => {
+                        if calculated_size.preserve_aspect_ratio {
+                            size.height = width * size.height / size.width;
+                        }
+                        size.width = width;
+                    }
+                    (Number::Undefined, Number::Defined(height)) => {
+                        if calculated_size.preserve_aspect_ratio {
+                            size.width = height * size.width / size.height;
+                        }
+                        size.height = height;
+                    }
+                    (Number::Defined(width), Number::Defined(height)) => {
+                        size.width = width;
+                        size.height = height;
+                    }
+                }
+                size
+            },
+        ));
+
+        if let Some(taffy_node) = self.entity_to_taffy.get(&entity) {
+            self.taffy
+                .set_style(*taffy_node, taffy::style::Style::default())
+                .unwrap();
+            self.taffy.set_measure(*taffy_node, Some(measure)).unwrap();
+        } else {
+            let taffy_node = taffy
+                .new_leaf(taffy::style::Style::default(), measure)
+                .unwrap();
+            self.entity_to_taffy.insert(entity, taffy_node);
+        }
+    }
+
     pub fn update_children(&mut self, entity: Entity, children: &Children) {
         let mut taffy_children = Vec::with_capacity(children.len());
         for child in children {
@@ -216,13 +266,18 @@ 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>>,
-    changed_size_query: Query<
-        (Entity, &Style, &CalculatedSize),
-        (With<Node>, Changed<CalculatedSize>),
+    node_query: Query<(Entity, &Style), (With<Node>, With<Style>)>,
+    full_node_query: Query<(Entity, &Style), With<Node>>,
+    widget_query: Query<(Entity, &CalculatedSize), (With<Node>, Without<Style>)>,
+    changed_widget_query: Query<
+        (Entity, &CalculatedSize),
+        (With<Node>, With<CalculatedSize>, Without<Style>),
     >,
-    children_query: Query<(Entity, &Children), (With<Node>, Changed<Children>)>,
+    // changed_size_query: Query<
+    //     (Entity, &Style, &CalculatedSize),
+    //     (With<Node>, Changed<CalculatedSize>),
+    // >,
+    children_query: Query<(Entity, &Children), (With<Node>, With<Children>)>,
     removed_children: RemovedComponents<Children>,
     mut node_transform_query: Query<(Entity, &mut Node, &mut Transform, Option<&Parent>)>,
     removed_nodes: RemovedComponents<Node>,
@@ -237,29 +292,25 @@ pub fn flex_node_system(
     let scale_factor = logical_to_physical_factor * ui_scale.scale;
 
     if scale_factor_events.iter().next_back().is_some() || ui_scale.is_changed() {
-        update_changed(&mut flex_surface, scale_factor, full_node_query);
+        for (entity, style) in &full_node_query {
+            flex_surface.upsert_node(entity, style, scale_factor);
+        }
+
+        for (entity, calculated_size) in &widget_query {
+            flex_surface.upsert_widget(entity, *calculated_size, scale_factor);
+        }
     } else {
-        update_changed(&mut flex_surface, scale_factor, node_query);
-    }
+        for (entity, style) in &node_query {
+            flex_surface.upsert_node(entity, style, scale_factor);
+        }
 
-    fn update_changed<F: ReadOnlyWorldQuery>(
-        flex_surface: &mut FlexSurface,
-        scaling_factor: f64,
-        query: Query<(Entity, &Style, Option<&CalculatedSize>), F>,
-    ) {
-        // update changed nodes
-        for (entity, style, 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);
-            } else {
-                flex_surface.upsert_node(entity, style, scaling_factor);
-            }
+        for (entity, calculated_size) in &changed_widget_query {
+            flex_surface.upsert_widget(entity, *calculated_size, scale_factor);
         }
     }
 
-    for (entity, style, calculated_size) in &changed_size_query {
-        flex_surface.upsert_leaf(entity, style, *calculated_size, scale_factor);
+    for (entity, calculated_size) in &changed_widget_query {
+        flex_surface.upsert_widget(entity, *calculated_size, scale_factor);
     }
 
     // clean up removed nodes
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index b086eb47a3ad2..5d0498557d8eb 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -65,8 +65,7 @@ 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,
+
     /// The calculated size based on the given image
     pub calculated_size: CalculatedSize,
     /// The background color, which serves as a "fill" for this node
@@ -100,8 +99,6 @@ pub struct ImageBundle {
 pub struct TextBundle {
     /// Describes the size of the node
     pub node: Node,
-    /// Describes the style including flexbox settings
-    pub style: Style,
     /// Contains the text of the node
     pub text: Text,
     /// The calculated size based on the given image
@@ -152,12 +149,6 @@ impl TextBundle {
         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
-    }
 }
 
 impl Default for TextBundle {
@@ -167,7 +158,6 @@ impl Default for TextBundle {
             text: Default::default(),
             node: Default::default(),
             calculated_size: Default::default(),
-            style: Default::default(),
             transform: Default::default(),
             global_transform: Default::default(),
             visibility: Default::default(),
@@ -184,8 +174,6 @@ 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,
     /// 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
@@ -221,7 +209,6 @@ impl Default for ButtonBundle {
             interaction: Default::default(),
             focus_policy: Default::default(),
             node: Default::default(),
-            style: Default::default(),
             background_color: Default::default(),
             image: Default::default(),
             transform: Default::default(),
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 738d578d6e5a3..bc6661b2ed81c 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -434,6 +434,8 @@ pub enum FlexWrap {
 pub struct CalculatedSize {
     /// The size of the node
     pub size: Size,
+    /// Whether to attempt to preserve the aspect ratio when determing the layout for this item
+    pub preserve_aspect_ratio: bool,
 }
 
 /// The background color of the node
diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs
index 623add4a6a283..ee9e84edc54bb 100644
--- a/crates/bevy_ui/src/update.rs
+++ b/crates/bevy_ui/src/update.rs
@@ -16,7 +16,13 @@ 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,
+        Option<&Style>,
+        Option<&mut CalculatedClip>,
+    )>,
+
     children_query: Query<&Children>,
 ) {
     for root_node in &root_node_query {
@@ -33,7 +39,12 @@ 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,
+        Option<&Style>,
+        Option<&mut CalculatedClip>,
+    )>,
     entity: Entity,
     clip: Option<Rect>,
 ) {
@@ -53,15 +64,18 @@ fn update_clipping(
             }
         }
     }
-
-    // Calculate new clip for its children
-    let children_clip = match style.overflow {
-        Overflow::Visible => clip,
-        Overflow::Hidden => {
-            let node_center = global_transform.translation().truncate();
-            let node_rect = Rect::from_center_size(node_center, node.calculated_size);
-            Some(clip.map_or(node_rect, |c| c.intersect(node_rect)))
+    let children_clip = if let Some(style) = style {
+        // Calculate new clip for its children
+        match style.overflow {
+            Overflow::Visible => clip,
+            Overflow::Hidden => {
+                let node_center = global_transform.translation().truncate();
+                let node_rect = Rect::from_center_size(node_center, node.calculated_size);
+                Some(clip.map_or(node_rect, |c| c.intersect(node_rect)))
+            }
         }
+    } else {
+        clip
     };
 
     if let Ok(children) = children_query.get(entity) {
diff --git a/crates/bevy_ui/src/widget/image.rs b/crates/bevy_ui/src/widget/image.rs
index 2916a6295223a..fa2e011232cec 100644
--- a/crates/bevy_ui/src/widget/image.rs
+++ b/crates/bevy_ui/src/widget/image.rs
@@ -21,6 +21,7 @@ pub fn update_image_calculated_size_system(
             // Update only if size has changed to avoid needless layout calculations
             if size != calculated_size.size {
                 calculated_size.size = size;
+                calculated_size.preserve_aspect_ratio = true;
             }
         }
     }
diff --git a/crates/bevy_ui/src/widget/text.rs b/crates/bevy_ui/src/widget/text.rs
index 8455a9455af13..930a3230d1239 100644
--- a/crates/bevy_ui/src/widget/text.rs
+++ b/crates/bevy_ui/src/widget/text.rs
@@ -1,11 +1,11 @@
-use crate::{CalculatedSize, Size, Style, UiScale, Val};
+use crate::{draw_ui_graph::node, CalculatedSize, Node, Size, UiScale, Val};
 use bevy_asset::Assets;
 use bevy_ecs::{
     entity::Entity,
     query::{Changed, Or, With},
     system::{Commands, Local, ParamSet, Query, Res, ResMut},
 };
-use bevy_math::Vec2;
+use bevy_hierarchy::Parent;
 use bevy_render::texture::Image;
 use bevy_sprite::TextureAtlas;
 use bevy_text::{
@@ -23,20 +23,6 @@ fn scale_value(value: f32, factor: f64) -> f32 {
     (value as f64 * factor) as f32
 }
 
-/// Defines how `min_size`, `size`, and `max_size` affects the bounds of a text
-/// block.
-pub fn text_constraint(min_size: Val, size: Val, max_size: Val, scale_factor: f64) -> f32 {
-    // Needs support for percentages
-    match (min_size, size, max_size) {
-        (_, _, Val::Px(max)) => scale_value(max, scale_factor),
-        (Val::Px(min), _, _) => scale_value(min, scale_factor),
-        (Val::Undefined, Val::Px(size), Val::Undefined) | (Val::Auto, Val::Px(size), Val::Auto) => {
-            scale_value(size, scale_factor)
-        }
-        _ => f32::MAX,
-    }
-}
-
 /// Updates the layout and size information whenever the text or style is changed.
 /// This information is computed by the `TextPipeline` on insertion, then stored.
 ///
@@ -59,15 +45,16 @@ 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, (With<Text>, With<Node>)>,
+        Query<Entity, With<Text>>,
         Query<(
+            &Parent,
             &Text,
-            &Style,
             &mut CalculatedSize,
             Option<&mut TextLayoutInfo>,
         )>,
     )>,
+    node_query: Query<&Node>,
 ) {
     // TODO: This should support window-independent scale settings.
     // See https://github.com/bevyengine/bevy/issues/5621
@@ -78,20 +65,10 @@ pub fn text_system(
     };
 
     let inv_scale_factor = 1. / scale_factor;
-
-    #[allow(clippy::float_cmp)]
-    if *last_scale_factor == scale_factor {
-        // Adds all entities where the text or the style has changed to the local queue
-        for entity in text_queries.p0().iter() {
-            queued_text.entities.push(entity);
-        }
-    } else {
-        // If the scale factor has changed, queue all text
-        for entity in text_queries.p1().iter() {
-            queued_text.entities.push(entity);
-        }
-        *last_scale_factor = scale_factor;
+    for entity in text_queries.p1().iter() {
+        queued_text.entities.push(entity);
     }
+    *last_scale_factor = scale_factor;
 
     if queued_text.entities.is_empty() {
         return;
@@ -101,22 +78,12 @@ 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) {
-            let node_size = Vec2::new(
-                text_constraint(
-                    style.min_size.width,
-                    style.size.width,
-                    style.max_size.width,
-                    scale_factor,
-                ),
-                text_constraint(
-                    style.min_size.height,
-                    style.size.height,
-                    style.max_size.height,
-                    scale_factor,
-                ),
-            );
-
+        if let Ok((parent, text, mut calculated_size, text_layout_info)) = query.get_mut(entity) {
+            let node_size = if let Ok(node) = node_query.get(parent.get()) {
+                node.calculated_size
+            } else {
+                continue;
+            };
             match text_pipeline.queue_text(
                 &fonts,
                 &text.sections,
diff --git a/examples/README.md b/examples/README.md
index e354e6f283120..a75571c0f92f6 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -313,6 +313,7 @@ Example | Description
 --- | ---
 [Button](../examples/ui/button.rs) | Illustrates creating and updating a button
 [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally)
+[Layout](..examples/ui/layout.rs) | Creates a more complex UI layout and demonstrates how the different JustifyContent and AlignItems variants compose
 [Text](../examples/ui/text.rs) | Illustrates creating and updating text
 [Text Debug](../examples/ui/text_debug.rs) | An example for debugging text layout
 [Transparency UI](../examples/ui/transparency_ui.rs) | Demonstrates transparency for UI
diff --git a/examples/ui/layout.rs b/examples/ui/layout.rs
new file mode 100644
index 0000000000000..305ffa78b4803
--- /dev/null
+++ b/examples/ui/layout.rs
@@ -0,0 +1,116 @@
+//! Example that creates a more complex UI layout and demonstrates how
+//! the different JustifyContent and AlignItems variants compose to determine the positions of items within the layout.
+
+use bevy::prelude::*;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            window: WindowDescriptor {
+                width: 1200.,
+                height: 1000.,
+                ..Default::default()
+            },
+            ..Default::default()
+        }))
+        .add_startup_system(setup)
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn(Camera2dBundle {
+        camera_2d: Camera2d {
+            clear_color: bevy::core_pipeline::clear_color::ClearColorConfig::Custom(Color::BLACK),
+        },
+        ..Default::default()
+    });
+    commands
+        .spawn(NodeBundle {
+            // Root Panel, covers the entire screen
+            style: Style {
+                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                justify_content: JustifyContent::FlexStart,
+                align_items: AlignItems::FlexStart,
+                flex_wrap: FlexWrap::Wrap,
+                ..Default::default()
+            },
+            background_color: BackgroundColor(Color::CYAN),
+            ..Default::default()
+        })
+        .with_children(|builder| {
+            let items = [
+                AlignItems::Baseline,
+                AlignItems::Center,
+                AlignItems::FlexEnd,
+                AlignItems::FlexStart,
+                AlignItems::Stretch,
+            ];
+            let justs = [
+                JustifyContent::Center,
+                JustifyContent::FlexEnd,
+                JustifyContent::FlexStart,
+                JustifyContent::SpaceAround,
+                JustifyContent::SpaceEvenly,
+                JustifyContent::SpaceBetween,
+            ];
+            for align_items in items.into_iter() {
+                for justify_content in justs.into_iter() {
+                    spawn_panel(builder, &asset_server, align_items, justify_content);
+                }
+            }
+        });
+}
+
+fn spawn_panel(
+    parent: &mut ChildBuilder,
+    asset_server: &Res<AssetServer>,
+    align_items: AlignItems,
+    justify_content: JustifyContent,
+) {
+    parent
+        .spawn(NodeBundle {
+            style: Style {
+                flex_direction: FlexDirection::Column,
+                align_items,
+                justify_content,
+                size: Size::new(Val::Px(190.), Val::Px(190.)),
+                margin: UiRect::all(Val::Px(5.)),
+                padding: UiRect::all(Val::Px(4.)),
+                ..Default::default()
+            },
+            background_color: BackgroundColor(Color::BLACK),
+            ..Default::default()
+        })
+        .with_children(|builder| {
+            let items = [
+                (format!("{:?}", align_items), Color::MAROON, Val::Px(0.)),
+                (
+                    format!("{:?}", justify_content),
+                    Color::DARK_GREEN,
+                    Val::Px(4.),
+                ),
+            ];
+            for (text, color, top_margin) in items {
+                builder
+                    .spawn(NodeBundle {
+                        style: Style {
+                            margin: UiRect::top(top_margin),
+                            padding: UiRect::all(Val::Px(4.)),
+                            ..Default::default()
+                        },
+                        background_color: BackgroundColor(color),
+                        ..Default::default()
+                    })
+                    .with_children(|builder| {
+                        builder.spawn(TextBundle::from_section(
+                            text,
+                            TextStyle {
+                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                font_size: 24.0,
+                                color: Color::ANTIQUE_WHITE,
+                            },
+                        ));
+                    });
+            }
+        });
+}
diff --git a/examples/ui/text.rs b/examples/ui/text.rs
index 014929cf7a63e..c6df249e22ba4 100644
--- a/examples/ui/text.rs
+++ b/examples/ui/text.rs
@@ -30,50 +30,76 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // UI camera
     commands.spawn(Camera2dBundle::default());
     // 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,
-            },
-        ) // Set the alignment of the Text
-        .with_text_alignment(TextAlignment::TOP_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),
+
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
+                flex_direction: FlexDirection::Column,
+                justify_content: JustifyContent::SpaceBetween,
                 ..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"),
-                    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,
-            }),
-        ]),
-        FpsText,
-    ));
+            ..Default::default()
+        })
+        .with_children(|parent| {
+            parent
+                .spawn(NodeBundle {
+                    style: Style {
+                        size: Size::new(Val::Percent(100.0), Val::Percent(50.0)),
+                        ..Default::default()
+                    },
+                    ..Default::default()
+                })
+                .with_children(|parent| {
+                    parent.spawn((
+                        TextBundle {
+                            text: Text::from_section(
+                                "hello\nbevy!",
+                                TextStyle {
+                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                    font_size: 100.0,
+                                    color: Color::WHITE,
+                                },
+                            ),
+                            ..Default::default()
+                        },
+                        ColorText,
+                    ));
+                });
+
+            parent
+                .spawn(NodeBundle {
+                    style: Style {
+                        size: Size::new(Val::Percent(100.0), Val::Percent(50.0)),
+                        align_items: AlignItems::FlexEnd,
+                        justify_content: JustifyContent::FlexEnd,
+                        ..Default::default()
+                    },
+                    ..Default::default()
+                })
+                .with_children(|parent| {
+                    // Text with multiple sections
+                    parent.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"),
+                                    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,
+                            }),
+                        ]),
+                        FpsText,
+                    ));
+                });
+        });
 }
 
 fn text_color_system(time: Res<Time>, mut query: Query<&mut Text, With<ColorText>>) {
diff --git a/examples/ui/text_debug.rs b/examples/ui/text_debug.rs
index 891ab36311603..9416123412968 100644
--- a/examples/ui/text_debug.rs
+++ b/examples/ui/text_debug.rs
@@ -27,35 +27,33 @@ 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(
-            "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 {
-                top: Val::Px(5.0),
-                left: Val::Px(15.0),
-                ..default()
-            },
-            ..default()
-        }),
-    );
-    commands.spawn(TextBundle::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),
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                position_type: PositionType::Absolute,
+                position: UiRect {
+                    top: Val::Px(5.0),
+                    left: Val::Px(15.0),
+                    ..default()
+                },
+                size: Size::new(Val::Px(300.0), Val::Percent(300.)),
+                ..Default::default()
             },
-        )
-        .with_text_alignment(TextAlignment::CENTER)
-        .with_style(Style {
+            ..Default::default()
+        })
+        .with_children(|parent| {
+            parent.spawn(TextBundle::from_section(
+                "This is\ntext with\nline breaks\nin the top left",
+                TextStyle {
+                    font: font.clone(),
+                    font_size: 50.0,
+                    color: Color::WHITE,
+                },
+            ));
+        });
+
+    commands.spawn(NodeBundle {
+        style: Style {
             position_type: PositionType::Absolute,
             position: UiRect {
                 top: Val::Px(5.0),
@@ -64,91 +62,122 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
             },
             max_size: Size {
                 width: Val::Px(400.),
-                height: Val::Undefined,
+                height: Val::Px(400.),
             },
-            ..default()
-        })
-    );
-    commands.spawn((
-        TextBundle::from_sections([
-            TextSection::new(
-                "This text changes in the bottom right",
+            ..Default::default()
+        },
+        ..Default::default()
+    })
+    .with_children(|parent| {
+        parent.spawn(TextBundle::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: 30.0,
-                    color: Color::WHITE,
+                    font_size: 50.0,
+                    color: Color::rgb(0.8, 0.2, 0.7),
                 },
-            ),
-            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::ORANGE_RED,
-            }),
-            TextSection::new(
-                " fps, ",
-                TextStyle {
-                    font: font.clone(),
-                    font_size: 30.0,
-                    color: Color::YELLOW,
+            )
+            .with_text_alignment(TextAlignment::CENTER)
+        );
+    });
+
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                position_type: PositionType::Absolute,
+                position: UiRect {
+                    bottom: Val::Px(5.0),
+                    right: Val::Px(15.0),
+                    ..default()
                 },
-            ),
-            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,
+                size: Size {
+                    width: Val::Px(1000.),
+                    height: Val::Px(300.),
                 },
-            ),
-        ])
-        .with_style(Style {
-            position_type: PositionType::Absolute,
-            position: UiRect {
-                bottom: Val::Px(5.0),
-                right: Val::Px(15.0),
-                ..default()
-            },
-            ..default()
-        }),
-        TextChanges,
-    ));
-    commands.spawn(
-        TextBundle::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 {
-                bottom: Val::Px(5.0),
-                left: Val::Px(15.0),
-                ..default()
+                align_items: AlignItems::FlexEnd,
+                justify_content: JustifyContent::FlexEnd,
+                ..Default::default()
             },
-            size: Size {
-                width: Val::Px(200.0),
+            ..Default::default()
+        })
+        .with_children(|parent| {
+            parent.spawn((
+                TextBundle::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::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,
+                        },
+                    ),
+                ]),
+                TextChanges,
+            ));
+        });
+
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                align_self: AlignSelf::FlexEnd,
+                position_type: PositionType::Absolute,
+                position: UiRect {
+                    bottom: Val::Px(5.0),
+                    left: Val::Px(15.0),
+                    ..default()
+                },
+                size: Size {
+                    width: Val::Px(200.),
+                    height: Val::Px(300.),
+                },
                 ..default()
             },
-            ..default()
-        }),
-    );
+            ..Default::default()
+        })
+        .with_children(|parent| {
+            parent.spawn(TextBundle::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,
+                },
+            ));
+        });
 }
 
 fn change_text_system(
diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
index 08d5a710f9dfc..4d8c438cf99e6 100644
--- a/examples/ui/ui.rs
+++ b/examples/ui/ui.rs
@@ -54,21 +54,34 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             ..default()
                         })
                         .with_children(|parent| {
-                            // text
-                            parent.spawn(
-                                TextBundle::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()
-                                }),
-                            );
+                            parent.spawn(|parent| {
+                                parent
+                                    .spawn(NodeBundle {
+                                        style: Style {
+                                            margin: UiRect::all(Val::Px(5.0)),
+                                            ..default()
+                                        },
+                                        ..Default::default()
+                                    })
+                                    .with_children(|parent| {
+                                        // text
+                                        parent.spawn(
+                                            TextBundle::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()
+                                            }),
+                                        );
+                                    });
+                            });
                         });
                 });
             // right vertical fill
@@ -85,25 +98,29 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 })
                 .with_children(|parent| {
                     // Title
-                    parent.spawn(
-                        TextBundle::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,
+                    parent
+                        .spawn(NodeBundle {
+                            style: Style {
+                                size: Size::new(Val::Undefined, Val::Px(25.)),
+                                margin: UiRect {
+                                    left: Val::Auto,
+                                    right: Val::Auto,
+                                    ..default()
+                                },
                                 ..default()
                             },
                             ..default()
-                        }),
-                    );
+                        })
+                        .with_children(|parent| {
+                            parent.spawn(TextBundle::from_section(
+                                "Scrolling list",
+                                TextStyle {
+                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                    font_size: 25.,
+                                    color: Color::WHITE,
+                                },
+                            ));
+                        });
                     // List with hidden overflow
                     parent
                         .spawn(NodeBundle {
@@ -282,14 +299,20 @@ 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),
+                    parent
+                        .spawn(NodeBundle {
+                            style: Style {
+                                size: Size::new(Val::Px(500.0), Val::Auto),
+                                ..default()
+                            },
                             ..default()
-                        },
-                        image: asset_server.load("branding/bevy_logo_dark_big.png").into(),
-                        ..default()
-                    });
+                        })
+                        .with_children(|builder| {
+                            builder.spawn(ImageBundle {
+                                image: asset_server.load("branding/bevy_logo_dark_big.png").into(),
+                                ..default()
+                            });
+                        })
                 });
         });
 }