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

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.
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.
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.
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;).
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).

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