CSS • Chapter 32 • Foundations to Production
Flex Items and Patterns
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
32.1 flex-grow
flex-grow is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For flex-grow in Chapter 32, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for flex-grow, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 32, topic 1.
Concept in plain language
flex-grow is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal article for flex-grow. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 32, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the profile panel example for flex-grow. Predict the visual difference before reloading the page. Chapter 32, topic 1, example 2.
Example 3: Narrow-screen test
Test flex-grow in the search form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 32, topic 1, example 3.
Example 4: Translated-text test
Translate the dashboard into a language with longer labels while using flex-grow. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 32, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the photo gallery to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 32, topic 1, example 5.
Example 6: Accessibility test
Check flex-grow in the pricing table with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 32, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the lesson sidebar and determine why the declaration for flex-grow wins or loses using the browser's Styles and Computed panels. Chapter 32, topic 1, example 7.
Example 8: Content-stress test
Fill the contact form with very long words, URLs, translated text, images, and nested controls. Adjust flex-grow without hiding meaningful content. Chapter 32, topic 1, example 8.
Example 9: Refactoring test
Rewrite the button group so flex-grow uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 32, topic 1, example 9.
Example 10: Production review
Review flex-grow in the data table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 32, topic 1, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><div class="item">Grow</div><div>Fixed</div></div>
<style>
.item { flex-grow:1; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate flex-grow.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- flex-grow distributes positive free space.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates flex-grow without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 32, topic 1.
Practice exercise
Build a fresh example for flex-grow from Chapter 32. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
32.2 flex-shrink
flex-shrink is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For flex-shrink in Chapter 32, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for flex-shrink, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 32, topic 2.
Concept in plain language
flex-shrink is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal dashboard for flex-shrink. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 32, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the photo gallery example for flex-shrink. Predict the visual difference before reloading the page. Chapter 32, topic 2, example 2.
Example 3: Narrow-screen test
Test flex-shrink in the pricing table at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 32, topic 2, example 3.
Example 4: Translated-text test
Translate the lesson sidebar into a language with longer labels while using flex-shrink. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 32, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the contact form to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 32, topic 2, example 5.
Example 6: Accessibility test
Check flex-shrink in the button group with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 32, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the data table and determine why the declaration for flex-shrink wins or loses using the browser's Styles and Computed panels. Chapter 32, topic 2, example 7.
Example 8: Content-stress test
Fill the media player with very long words, URLs, translated text, images, and nested controls. Adjust flex-shrink without hiding meaningful content. Chapter 32, topic 2, example 8.
Example 9: Refactoring test
Rewrite the notification so flex-shrink uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 32, topic 2, example 9.
Example 10: Production review
Review flex-shrink in the language selector for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 32, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><div class="item">This item may shrink</div></div>
<style>
.item { flex:0 1 20rem; min-width:0; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate flex-shrink.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- flex-shrink controls how an item contracts when space is tight.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates flex-shrink without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 32, topic 2.
Practice exercise
Build a fresh example for flex-shrink from Chapter 32. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
32.3 flex-basis
flex-basis is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For flex-basis in Chapter 32, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for flex-basis, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 32, topic 3.
Concept in plain language
flex-basis is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal lesson sidebar for flex-basis. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 32, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the contact form example for flex-basis. Predict the visual difference before reloading the page. Chapter 32, topic 3, example 2.
Example 3: Narrow-screen test
Test flex-basis in the button group at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 32, topic 3, example 3.
Example 4: Translated-text test
Translate the data table into a language with longer labels while using flex-basis. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 32, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the media player to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 32, topic 3, example 5.
Example 6: Accessibility test
Check flex-basis in the notification with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 32, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the language selector and determine why the declaration for flex-basis wins or loses using the browser's Styles and Computed panels. Chapter 32, topic 3, example 7.
Example 8: Content-stress test
Fill the course card with very long words, URLs, translated text, images, and nested controls. Adjust flex-basis without hiding meaningful content. Chapter 32, topic 3, example 8.
Example 9: Refactoring test
Rewrite the navigation bar so flex-basis uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 32, topic 3, example 9.
Example 10: Production review
Review flex-basis in the article for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 32, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<h2>Balanced heading</h2>
<style>
:is(h1,h2,h3) { text-wrap: balance; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate flex-basis.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- :is() groups selector alternatives without repeating the rest of the selector.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates flex-basis without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 32, topic 3.
Practice exercise
Build a fresh example for flex-basis from Chapter 32. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
32.4 order
order is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For order in Chapter 32, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for order, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 32, topic 4.
Concept in plain language
order is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal data table for order. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 32, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the media player example for order. Predict the visual difference before reloading the page. Chapter 32, topic 4, example 2.
Example 3: Narrow-screen test
Test order in the notification at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 32, topic 4, example 3.
Example 4: Translated-text test
Translate the language selector into a language with longer labels while using order. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 32, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the course card to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 32, topic 4, example 5.
Example 6: Accessibility test
Check order in the navigation bar with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 32, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the article and determine why the declaration for order wins or loses using the browser's Styles and Computed panels. Chapter 32, topic 4, example 7.
Example 8: Content-stress test
Fill the profile panel with very long words, URLs, translated text, images, and nested controls. Adjust order without hiding meaningful content. Chapter 32, topic 4, example 8.
Example 9: Refactoring test
Rewrite the search form so order uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 32, topic 4, example 9.
Example 10: Production review
Review order in the dashboard for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 32, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><div>A</div><div class="featured">Featured</div></div>
<style>
.featured { order:-1; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate order.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- order changes visual order, so it must not replace meaningful source order.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates order without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 32, topic 4.
Practice exercise
Build a fresh example for order from Chapter 32. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
32.5 Auto Margins in Flexbox
Auto Margins in Flexbox is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size. The goal is to connect the syntax to the browser's layout and cascade decisions rather than memorize a property name.
For Auto Margins in Flexbox in Chapter 32, inspect the matched selector, computed value, containing block or formatting context, intrinsic size, and any min/max constraints. When translation is enabled, also inspect whether longer text or RTL direction changes the available inline space.
Start with one small example for Auto Margins in Flexbox, resize the viewport, increase text size, translate the label, and add a competing rule. This shows whether the technique remains predictable under real content rather than only in a fixed desktop mockup. This explanation is specific to Chapter 32, topic 5.
Concept in plain language
Auto Margins in Flexbox is part of the CSS system covered in Chapter 32. The key is to understand what box, selector, cascade rule, layout algorithm, or user preference the declaration affects, then test the result at more than one viewport size.
10 teaching examples
Example 1: Smallest useful case
Build a minimal language selector for Auto Margins in Flexbox. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 32, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the course card example for Auto Margins in Flexbox. Predict the visual difference before reloading the page. Chapter 32, topic 5, example 2.
Example 3: Narrow-screen test
Test Auto Margins in Flexbox in the navigation bar at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 32, topic 5, example 3.
Example 4: Translated-text test
Translate the article into a language with longer labels while using Auto Margins in Flexbox. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 32, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the profile panel to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 32, topic 5, example 5.
Example 6: Accessibility test
Check Auto Margins in Flexbox in the search form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 32, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the dashboard and determine why the declaration for Auto Margins in Flexbox wins or loses using the browser's Styles and Computed panels. Chapter 32, topic 5, example 7.
Example 8: Content-stress test
Fill the photo gallery with very long words, URLs, translated text, images, and nested controls. Adjust Auto Margins in Flexbox without hiding meaningful content. Chapter 32, topic 5, example 8.
Example 9: Refactoring test
Rewrite the pricing table so Auto Margins in Flexbox uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 32, topic 5, example 9.
Example 10: Production review
Review Auto Margins in Flexbox in the lesson sidebar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 32, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="actions"><button>Cancel</button><button class="save">Save</button></div>
<style>
.actions { display:flex; }.save { margin-inline-start:auto; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate Auto Margins in Flexbox.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- An auto margin on the inline start side can consume available free space.
- Resize the viewport and test long translated content. Confirm that flex/grid items use min-width:0 where needed and that only code or genuinely wide content scrolls locally.
- Switch to Arabic or Persian and verify logical start/end spacing, text alignment, sidebar direction, and LTR isolation for code.
Expected result: The browser visibly demonstrates Auto Margins in Flexbox without requiring the page to exceed the viewport width. If the example contains wide code, only the code block scrolls horizontally. This expected result belongs to Chapter 32, topic 5.
Practice exercise
Build a fresh example for Auto Margins in Flexbox from Chapter 32. Change one value, inspect the computed styles, test at 320px and tablet width, translate the visible text, switch the page to RTL, and explain why the final declaration or layout behavior occurs.
Chapter 32 review — 10 questions and answers
1. What should you inspect first when flex-grow does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for flex-grow. Then reduce the example until the winning declaration is clear.
2. How should flex-grow be checked before publishing?
Answer: Test flex-grow on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
3. What should you inspect first when flex-shrink does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for flex-shrink. Then reduce the example until the winning declaration is clear.
4. How should flex-shrink be checked before publishing?
Answer: Test flex-shrink on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
5. What should you inspect first when flex-basis does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for flex-basis. Then reduce the example until the winning declaration is clear.
6. How should flex-basis be checked before publishing?
Answer: Test flex-basis on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
7. What should you inspect first when order does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for order. Then reduce the example until the winning declaration is clear.
8. How should order be checked before publishing?
Answer: Test order on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.
9. What should you inspect first when Auto Margins in Flexbox does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for Auto Margins in Flexbox. Then reduce the example until the winning declaration is clear.
10. How should Auto Margins in Flexbox be checked before publishing?
Answer: Test Auto Margins in Flexbox on narrow and wide screens, with long translated text, at increased zoom, and in RTL where direction can affect layout. Add a fallback if browser support or user preferences require one.