You can use this lesson in your class!
Day 8: Advanced Flexbox—Wrapping, Ordering, and More Alignment Options
Completed

Day 8: Advanced Flexbox—Wrapping, Ordering, and More Alignment Options

By Robert Buseck, Margarito Valencia, zach dubroc, Jessika Hayes, Sara Dedeaux, Justin Buseck MCA-Misslou Instructor, Jonathan Pruitt WF360 Instructor, Matthew Harris, Herbert Brown, Jordan Roland, Blake Wyatt, Jim StClair, Windie Speed, Justin Buseck, Nicole Torres Mendez BHA Instructor, WESLEY EDWARDS, and Monica Donohue

Lesson Content

Beyond Basic Flexbox

Flexbox provides powerful tools to handle items of differing sizes, reorder elements without changing the HTML, and control how they wrap onto new lines. These features make one-dimensional layouts significantly more flexible, especially when the container must respond to changing screen sizes or dynamic content.

Key Concepts

  1. Flex-Wrap
    • flex-wrap: nowrap | wrap | wrap-reverse;
    • nowrap (default): Items stay on one line, potentially overflowing the container.
    • wrap: Items move onto new lines when there’s insufficient space.
    • wrap-reverse: Similar to wrap but the line order is reversed.
  2. Ordering Items
    • order: <integer>;
    • By default, each item has order: 0. Items with lower values appear first.
    • This lets you rearrange flex items without modifying the HTML structure.
  3. Flex-Basis, Flex-Grow, Flex-Shrink
    • These three properties often appear together in shorthand as flex: <grow> <shrink> <basis>.
    • flex-basis: The initial main-size of the item before extra space is distributed.
    • flex-grow: How much an item can grow when there’s extra space.
    • flex-shrink: How much an item shrinks when there’s not enough space.
    • Example: flex: 1 1 200px; means each item can grow and shrink, starting at 200px.
  4. Align-Content
    • Controls how multi-line (wrapped) flex containers distribute space between lines along the cross axis.
    • Common values: stretch (default), flex-start, flex-end, center, space-between, space-around.
    • Only applies if multiple lines exist (i.e., flex-wrap: wrap;).
  5. Justify-Content vs. Align-Items vs. Align-Content
    • justify-content: Aligns items along the main axis (horizontal if flex-direction: row;).
    • align-items: Aligns items along the cross axis.
    • align-content: Aligns multiple lines along the cross axis (kicks in with wrapping).

HTML + CSS Example

html
Copy code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Week 4, Day 8 Example: Advanced Flexbox</title>
    <style>
      .flex-container {
        display: flex;
        flex-wrap: wrap; /* allow items to wrap to new lines */
        align-content: space-between; /* affects multiple lines */
        gap: 1rem;
        width: 80%;
        margin: 20px auto;
        border: 2px solid #333;
        padding: 10px;
      }

      .flex-item {
        background-color: lightblue;
        padding: 20px;
        text-align: center;
        flex: 1 1 150px; /* grow: 1, shrink: 1, basis: 150px */
      }

      /* Example of reordering one item */
      .item-special {
        order: -1; /* appears before others with order: 0 */
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <h1>Advanced Flexbox Techniques</h1>
    <p>
      Resize the browser to see the items wrap, and note the “special” item appears first due to <code>order: -1</code>.
    </p>

    <div class="flex-container">
      <div class="flex-item">Item A</div>
      <div class="flex-item">Item B</div>
      <div class="flex-item item-special">Special Item</div>
      <div class="flex-item">Item C</div>
      <div class="flex-item">Item D</div>
      <div class="flex-item">Item E</div>
    </div>
  </body>
</html>
  • flex-wrap: wrap;: Items wrap to a new line when space runs out.
  • order: -1;: The “Special Item” moves to the front.
  • flex: 1 1 150px;: Each item starts at 150px wide, can grow to fill extra space, and can shrink if needed.

Definition Section

  1. Wrap / Nowrap
    • Determines if items remain on one line (nowrap) or wrap onto new lines when space is insufficient.
  2. Order
    • Changes the order of flex items in the container, allowing rearranging without altering HTML.
  3. Flex-Basis
    • Initial main-size of a flex item before extra space is distributed or items shrink.
  4. Flex-Grow / Flex-Shrink
    • Control how items expand or contract to fill available space (grow) or fit into limited space (shrink).
  5. Align-Content
    • Adjusts spacing between multiple lines of flex items (only effective when wrapping is in place).

Brief History of Flexbox Enhancements

  • Early Flexbox Drafts (2012): Provided basic features for one-line alignment.
  • Flexbox WD (Working Draft) to CR (Candidate Recommendation): Introduced advanced properties like order, flex-basis, and refined wrapping behavior.
  • Modern Browsers: Largely support the final spec, enabling complex layouts with minimal code.

Fun Facts

  1. order property can improve accessibility and SEO if used carefully, but might confuse screen readers if the visual order deviates from the DOM order.
  2. flex: 1; is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0;, a common pattern for evenly distributed items.
  3. Using Flexbox with wrap can often replace many typical “grid-like” layouts for simple, responsive item galleries without needing CSS Grid.

Practice Problems

Create a new HTML file for each problem, focusing on advanced Flexbox properties.

Problem 1: Wrapping Gallery

  1. File Name: problem1.html
  2. Build a .flex-container with at least 6 child .flex-items.
  3. Use flex-wrap: wrap; so items move onto multiple lines.
  4. Adjust align-content (e.g., space-around, center, stretch) to see how it affects the multi-line layout.

Problem 2: Ordering

  1. File Name: problem2.html
  2. Create 4–5 .flex-items in a container.
  3. Assign differing order values (e.g., order: 2;, order: -1;, etc.) to rearrange them visually.
  4. Confirm that the HTML source order differs from the visual order.

Problem 3: Flex-Grow and Flex-Basis

  1. File Name: problem3.html
  2. For each .flex-item, use a different combination of flex-basis and flex-grow.
  3. Observe how items expand or shrink proportionally when the container is resized.
  4. Write a short note about how flex: 1 0 200px; or flex: 2 1 100px; changes the layout behavior.

Assignment Submission

After completing these exercises, call Mike over for feedback on your newly created HTML and CSS solutions.