CSS • Chapter 31 • Foundations to Production
Flexbox Foundations
Every topic includes a CSS/HTML coding example, ten focused teaching examples, code explanation, expected result, practice, and responsive/translated-layout checks.
31.1 display flex
display flex is part of the CSS system covered in Chapter 31. 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 display flex in Chapter 31, 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 display flex, 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 31, topic 1.
Concept in plain language
display flex is part of the CSS system covered in Chapter 31. 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 button group for display flex. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 31, topic 1, example 1.
Example 2: Change one value
Change one important CSS value in the data table example for display flex. Predict the visual difference before reloading the page. Chapter 31, topic 1, example 2.
Example 3: Narrow-screen test
Test display flex in the media player at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 31, topic 1, example 3.
Example 4: Translated-text test
Translate the notification into a language with longer labels while using display flex. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 31, topic 1, example 4.
Example 5: Arabic/Persian test
Switch the language selector to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 31, topic 1, example 5.
Example 6: Accessibility test
Check display flex in the course card with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 31, topic 1, example 6.
Example 7: Cascade test
Add a competing rule to the navigation bar and determine why the declaration for display flex wins or loses using the browser's Styles and Computed panels. Chapter 31, topic 1, example 7.
Example 8: Content-stress test
Fill the article with very long words, URLs, translated text, images, and nested controls. Adjust display flex without hiding meaningful content. Chapter 31, topic 1, example 8.
Example 9: Refactoring test
Rewrite the profile panel so display flex uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 31, topic 1, example 9.
Example 10: Production review
Review display flex in the search form for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 31, topic 1, 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 display flex.
- 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 display flex 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 31, topic 1.
Practice exercise
Build a fresh example for display flex from Chapter 31. 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.
31.2 flex-direction
flex-direction is part of the CSS system covered in Chapter 31. 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-direction in Chapter 31, 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-direction, 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 31, topic 2.
Concept in plain language
flex-direction is part of the CSS system covered in Chapter 31. 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 notification for flex-direction. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 31, topic 2, example 1.
Example 2: Change one value
Change one important CSS value in the language selector example for flex-direction. Predict the visual difference before reloading the page. Chapter 31, topic 2, example 2.
Example 3: Narrow-screen test
Test flex-direction in the course card at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 31, topic 2, example 3.
Example 4: Translated-text test
Translate the navigation bar into a language with longer labels while using flex-direction. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 31, topic 2, example 4.
Example 5: Arabic/Persian test
Switch the article to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 31, topic 2, example 5.
Example 6: Accessibility test
Check flex-direction in the profile panel with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 31, topic 2, example 6.
Example 7: Cascade test
Add a competing rule to the search form and determine why the declaration for flex-direction wins or loses using the browser's Styles and Computed panels. Chapter 31, topic 2, example 7.
Example 8: Content-stress test
Fill the dashboard with very long words, URLs, translated text, images, and nested controls. Adjust flex-direction without hiding meaningful content. Chapter 31, topic 2, example 8.
Example 9: Refactoring test
Rewrite the photo gallery so flex-direction uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 31, topic 2, example 9.
Example 10: Production review
Review flex-direction in the pricing table for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 31, topic 2, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><div>A</div><div>B</div></div>
<style>
.row { display:flex; flex-direction:column; gap:.75rem; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate flex-direction.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- flex-direction changes the main axis.
- 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-direction 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 31, topic 2.
Practice exercise
Build a fresh example for flex-direction from Chapter 31. 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.
31.3 flex-wrap
flex-wrap is part of the CSS system covered in Chapter 31. 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-wrap in Chapter 31, 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-wrap, 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 31, topic 3.
Concept in plain language
flex-wrap is part of the CSS system covered in Chapter 31. 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 navigation bar for flex-wrap. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 31, topic 3, example 1.
Example 2: Change one value
Change one important CSS value in the article example for flex-wrap. Predict the visual difference before reloading the page. Chapter 31, topic 3, example 2.
Example 3: Narrow-screen test
Test flex-wrap in the profile panel at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 31, topic 3, example 3.
Example 4: Translated-text test
Translate the search form into a language with longer labels while using flex-wrap. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 31, topic 3, example 4.
Example 5: Arabic/Persian test
Switch the dashboard to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 31, topic 3, example 5.
Example 6: Accessibility test
Check flex-wrap in the photo gallery with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 31, topic 3, example 6.
Example 7: Cascade test
Add a competing rule to the pricing table and determine why the declaration for flex-wrap wins or loses using the browser's Styles and Computed panels. Chapter 31, topic 3, example 7.
Example 8: Content-stress test
Fill the lesson sidebar with very long words, URLs, translated text, images, and nested controls. Adjust flex-wrap without hiding meaningful content. Chapter 31, topic 3, example 8.
Example 9: Refactoring test
Rewrite the contact form so flex-wrap uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 31, topic 3, example 9.
Example 10: Production review
Review flex-wrap in the button group for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 31, topic 3, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><button>Long label one</button><button>Long label two</button></div>
<style>
.row { display:flex; flex-wrap:wrap; gap:.75rem; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate flex-wrap.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- flex-wrap allows items to move to additional lines instead of causing overflow.
- 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-wrap 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 31, topic 3.
Practice exercise
Build a fresh example for flex-wrap from Chapter 31. 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.
31.4 justify-content
justify-content is part of the CSS system covered in Chapter 31. 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 justify-content in Chapter 31, 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 justify-content, 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 31, topic 4.
Concept in plain language
justify-content is part of the CSS system covered in Chapter 31. 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 search form for justify-content. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 31, topic 4, example 1.
Example 2: Change one value
Change one important CSS value in the dashboard example for justify-content. Predict the visual difference before reloading the page. Chapter 31, topic 4, example 2.
Example 3: Narrow-screen test
Test justify-content in the photo gallery at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 31, topic 4, example 3.
Example 4: Translated-text test
Translate the pricing table into a language with longer labels while using justify-content. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 31, topic 4, example 4.
Example 5: Arabic/Persian test
Switch the lesson sidebar to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 31, topic 4, example 5.
Example 6: Accessibility test
Check justify-content in the contact form with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 31, topic 4, example 6.
Example 7: Cascade test
Add a competing rule to the button group and determine why the declaration for justify-content wins or loses using the browser's Styles and Computed panels. Chapter 31, topic 4, example 7.
Example 8: Content-stress test
Fill the data table with very long words, URLs, translated text, images, and nested controls. Adjust justify-content without hiding meaningful content. Chapter 31, topic 4, example 8.
Example 9: Refactoring test
Rewrite the media player so justify-content uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 31, topic 4, example 9.
Example 10: Production review
Review justify-content in the notification for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 31, topic 4, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><span>Start</span><span>End</span></div>
<style>
.row { display:flex; justify-content:space-between; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate justify-content.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- justify-content distributes free space on the main axis.
- 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 justify-content 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 31, topic 4.
Practice exercise
Build a fresh example for justify-content from Chapter 31. 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.
31.5 align-items
align-items is part of the CSS system covered in Chapter 31. 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 align-items in Chapter 31, 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 align-items, 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 31, topic 5.
Concept in plain language
align-items is part of the CSS system covered in Chapter 31. 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 pricing table for align-items. Keep only the declarations needed to see the behavior clearly, then inspect the computed styles. Chapter 31, topic 5, example 1.
Example 2: Change one value
Change one important CSS value in the lesson sidebar example for align-items. Predict the visual difference before reloading the page. Chapter 31, topic 5, example 2.
Example 3: Narrow-screen test
Test align-items in the contact form at 320px, 375px, and tablet width. Watch for min-content sizing, unwrapped text, and elements that refuse to shrink. Chapter 31, topic 5, example 3.
Example 4: Translated-text test
Translate the button group into a language with longer labels while using align-items. Confirm buttons, headings, and navigation wrap without widening the page. Chapter 31, topic 5, example 4.
Example 5: Arabic/Persian test
Switch the data table to Arabic or Persian. Verify logical spacing, start/end alignment, sidebar direction, and LTR code islands. Chapter 31, topic 5, example 5.
Example 6: Accessibility test
Check align-items in the media player with keyboard focus, zoom, reduced motion, forced colors, and high text scaling where relevant. Chapter 31, topic 5, example 6.
Example 7: Cascade test
Add a competing rule to the notification and determine why the declaration for align-items wins or loses using the browser's Styles and Computed panels. Chapter 31, topic 5, example 7.
Example 8: Content-stress test
Fill the language selector with very long words, URLs, translated text, images, and nested controls. Adjust align-items without hiding meaningful content. Chapter 31, topic 5, example 8.
Example 9: Refactoring test
Rewrite the course card so align-items uses reusable tokens, logical properties, or a component class while preserving the same behavior. Chapter 31, topic 5, example 9.
Example 10: Production review
Review align-items in the navigation bar for browser support, fallback behavior, RTL, small screens, print, motion preferences, and maintainability. Chapter 31, topic 5, example 10.
CSS/HTML coding example
<!-- HTML -->
<div class="row"><button>Centered</button></div>
<style>
.row { display:flex; align-items:center; min-height:8rem; }
</style>Step-by-step code explanation
- Identify the selector and declaration that demonstrate align-items.
- Read the HTML structure first so you know which box or relationship the CSS is styling.
- align-items aligns flex items on the cross axis.
- 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 align-items 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 31, topic 5.
Practice exercise
Build a fresh example for align-items from Chapter 31. 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 31 review — 10 questions and answers
1. What should you inspect first when display flex does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for display flex. Then reduce the example until the winning declaration is clear.
2. How should display flex be checked before publishing?
Answer: Test display flex 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-direction does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for flex-direction. Then reduce the example until the winning declaration is clear.
4. How should flex-direction be checked before publishing?
Answer: Test flex-direction 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-wrap does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for flex-wrap. Then reduce the example until the winning declaration is clear.
6. How should flex-wrap be checked before publishing?
Answer: Test flex-wrap 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 justify-content does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for justify-content. Then reduce the example until the winning declaration is clear.
8. How should justify-content be checked before publishing?
Answer: Test justify-content 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 align-items does not work as expected?
Answer: Inspect the matched rules, computed value, box size, layout context, and inherited values for align-items. Then reduce the example until the winning declaration is clear.
10. How should align-items be checked before publishing?
Answer: Test align-items 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.