Remove custom window size from flex_layout example (#11876)

# Objective

The example showcase doesn't seem to work well with the portrait aspect
ratio used in this example, which is possibly something to be fixed
there, but there's also no reason this *needs* a custom size.

This custom window size is also sightly too tall for my particular
display which is a very common display size when accounting for the
macOS task bar and window title, so the content at the bottom is
clipped.

## Solution

- Remove the custom window size
- Swap the order of the justify / align nested loops so that the content
fits the new aspect ratio
- Make the containers responsive to window size, and make all the gaps
even

## Before

<img width="870" alt="Screenshot 2024-02-15 at 10 56 11 AM"
src="https://github.com/bevyengine/bevy/assets/200550/803217dd-e311-4f9e-aabf-2656f7f67615">

## After

<img width="1280" alt="Screenshot 2024-02-15 at 10 56 25 AM"
src="https://github.com/bevyengine/bevy/assets/200550/bf1e4920-f053-4d42-ab0b-3efea6835cae">

Co-authored-by: Alice Cecile <[email protected]>

Author: rparrett

examples/ui/flex_layout.rs

@@ -3,13 +3,12 @@ use bevy::prelude::*;
 
 const ALIGN_ITEMS_COLOR: LegacyColor = LegacyColor::rgb(1., 0.066, 0.349);
 const JUSTIFY_CONTENT_COLOR: LegacyColor = LegacyColor::rgb(0.102, 0.522, 1.);
-const MARGIN: Val = Val::Px(5.);
+const MARGIN: Val = Val::Px(12.);
 
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins.set(WindowPlugin {
             primary_window: Some(Window {
-                resolution: [870., 1066.].into(),
                 title: "Bevy Flex Layout Example".to_string(),
                 ..Default::default()
             }),
@@ -27,8 +26,11 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
             style: Style {
                 // fill the entire window
                 width: Val::Percent(100.),
+                height: Val::Percent(100.),
                 flex_direction: FlexDirection::Column,
                 align_items: AlignItems::Center,
+                padding: UiRect::all(MARGIN),
+                row_gap: MARGIN,
                 ..Default::default()
             },
             background_color: BackgroundColor(LegacyColor::BLACK),
@@ -40,7 +42,6 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .spawn(NodeBundle {
                     style: Style {
                         flex_direction: FlexDirection::Row,
-                        margin: UiRect::top(MARGIN),
                         ..Default::default()
                     },
                     ..Default::default()
@@ -65,9 +66,10 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
             builder
                 .spawn(NodeBundle {
                     style: Style {
-                        width: Val::Px(850.),
-                        height: Val::Px(1020.),
+                        width: Val::Percent(100.),
+                        height: Val::Percent(100.),
                         flex_direction: FlexDirection::Column,
+                        row_gap: MARGIN,
                         ..Default::default()
                     },
                     ..Default::default()
@@ -89,17 +91,20 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                         AlignItems::FlexEnd,
                         AlignItems::Stretch,
                     ];
-                    for justify_content in justifications {
+                    for align_items in alignments {
                         builder
                             .spawn(NodeBundle {
                                 style: Style {
+                                    width: Val::Percent(100.),
+                                    height: Val::Percent(100.),
                                     flex_direction: FlexDirection::Row,
+                                    column_gap: MARGIN,
                                     ..Default::default()
                                 },
                                 ..Default::default()
                             })
                             .with_children(|builder| {
-                                for align_items in alignments {
+                                for justify_content in justifications {
                                     spawn_child_node(
                                         builder,
                                         font.clone(),
@@ -125,9 +130,8 @@ fn spawn_child_node(
                 flex_direction: FlexDirection::Column,
                 align_items,
                 justify_content,
-                width: Val::Px(160.),
-                height: Val::Px(160.),
-                margin: UiRect::all(MARGIN),
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
                 ..Default::default()
             },
             background_color: BackgroundColor(LegacyColor::DARK_GRAY),