Nearby lessons
2 of 15📦 CSS Flex Container
📌 What is a Flex Container?
The flex container is the parent element where the Flexbox layout begins. 🚀 It controls how child items (called flex items) are positioned and spaced.
Using display: flex or display: inline-flex turns any HTML element into a flex container.
This section explains each flex container property with examples to help you master layout building with Flexbox. 🧠💪
📋 What Can Flex Container Do?
- 📏 Arrange items in rows or columns
- 🔄 Change item direction and wrapping
- 📐 Align and justify content easily
1️⃣ display - The Foundation
The display: flex property creates a flex container. This enables flex layout for all direct children.
🔑 Key points:
- Turns any element into a flex container
- Affects only direct children (flex items)
- Removes whitespace between items
| Attribute | Value | Description |
|---|---|---|
display | flex | Block-level flex container |
display | inline-flex | Inline-level flex container |
🧱 display: flex
display: flex creates a block-level flex container (takes full width).
Code Example
📏 display: inline-flex
display: inline-flex creates an inline-level flex container (takes only needed width).
Code Example
2️⃣ flex-direction - Flow Control
🔄 The flex-direction property establishes the main axis and direction of flex items.
🎯 Visualization tip: Imagine items flowing along this direction!
| Attribute | Value | Description |
|---|---|---|
flex-direction | row (default) | Left to right in ltr; right to left in rtl |
flex-direction | row-reverse | Right to left in ltr; left to right in rtl |
flex-direction | column | Same as row but top to bottom |
flex-direction | column-reverse | Same as row-reverse but bottom to top |
➡️ flex-direction: row
flex-direction: row (default) - Items flow left to right.
Code Example
⬅️ flex-direction: row-reverse
flex-direction: row-reverse - Items flow right to left.
Code Example
⬇️ flex-direction: column
flex-direction: column - Items flow top to bottom.
Code Example
⬆️ flex-direction: column-reverse
flex-direction: column-reverse - Items flow bottom to top.
Code Example
3️⃣ flex-wrap - Multi-line Magic
🔄 The flex-wrap property controls whether flex items are forced onto one line or can wrap.
📱 Responsive tip: Essential for creating flexible layouts on different screen sizes!
| Attribute | Value | Description |
|---|---|---|
flex-wrap | nowrap (default) | All items on single line (may overflow) |
flex-wrap | wrap | Items wrap to multiple lines top to bottom |
flex-wrap | wrap-reverse | Items wrap to multiple lines bottom to top |
🚫 flex-wrap: nowrap
flex-wrap: nowrap (default) - All items stay on one line (may overflow).
Code Example
🔀 flex-wrap: wrap
flex-wrap: wrap - Items wrap to multiple lines when needed.
Code Example
🔄 flex-wrap: wrap-reverse
flex-wrap: wrap-reverse - Items wrap in reverse (bottom to top).
Code Example
4️⃣ flex-flow - Direction + Wrap
🎯 The flex-flow shorthand combines flex-direction and flex-wrap.
💡 Syntax: flex-flow: <flex-direction> <flex-wrap>
| Attribute | Value | Description |
|---|---|---|
flex-flow | row nowrap (default) | Same as flex-direction: row + flex-wrap: nowrap |
flex-flow | column wrap | Column direction with wrapping |
flex-flow | row-reverse wrap-reverse | Reversed row with reverse wrapping |
🔀 flex-flow: row wrap
flex-flow: row wrap - Row direction with wrapping.
Code Example
📦 flex-flow: column wrap
flex-flow: column wrap - Column direction with wrapping.
Code Example
5️⃣ justify-content - Main Axis Alignment
↔️ The justify-content property aligns items along the main axis.
🌈 Visualization: Imagine pushing items along the primary direction!
| Attribute | Value | Description |
|---|---|---|
justify-content | flex-start (default) | Items packed toward start of line |
justify-content | flex-end | Items packed toward end of line |
justify-content | center | Items centered along the line |
justify-content | space-between | Equal space between items |
justify-content | space-around | Equal space around items |
justify-content | space-evenly | Equal space around and between items |
👈 justify-content: flex-start
justify-content: flex-start (default) - Items align to start.
Code Example
👉 justify-content: flex-end
justify-content: flex-end - Items align to end.
Code Example
🎯 justify-content: center
justify-content: center - Items center along main axis.
Code Example
↔️ justify-content: space-between
justify-content: space-between - Equal space between items.
Code Example
⏹️ justify-content: space-around
justify-content: space-around - Equal space around items.
Code Example
⚖️ justify-content: space-evenly
justify-content: space-evenly - Equal space around and between items.
Code Example
6️⃣ align-items - Cross Axis Alignment
↕️ The align-items property defines how items are laid out along the cross axis.
🔄 Remember: Cross axis is perpendicular to main axis!
| Attribute | Value | Description |
|---|---|---|
align-items | stretch (default) | Items stretch to fill container |
align-items | flex-start | Items align to cross start |
align-items | flex-end | Items align to cross end |
align-items | center | Items center along cross axis |
align-items | baseline | Items align by their baselines |
📏 align-items: stretch
align-items: stretch (default) - Items stretch to fill container.
Code Example
👆 align-items: flex-start
align-items: flex-start - Items align to cross start.
Code Example
👇 align-items: flex-end
align-items: flex-end - Items align to cross end.
Code Example
🎯 align-items: center
align-items: center - Items center along cross axis.
Code Example
📐 align-items: baseline
align-items: baseline - Items align by text baselines.
Code Example
7️⃣ align-content - Multi-line Alignment
📦 The align-content property aligns flex container's lines when there is extra space.
⚠️ Note: Only works with flex-wrap: wrap and multiple lines!
| Attribute | Value | Description |
|---|---|---|
align-content | stretch (default) | Lines stretch to take remaining space |
align-content | flex-start | Lines packed to container start |
align-content | flex-end | Lines packed to container end |
align-content | center | Lines packed to container center |
align-content | space-between | Equal space between lines |
align-content | space-around | Equal space around lines |
📏 align-content: stretch (default)
align-content: stretch stretches lines of items to fill the container's cross-axis space when there are multiple lines.
Code Example
👆 align-content: flex-start
align-content: flex-start packs lines to the start of the cross-axis.
Code Example
👇 align-content: flex-end
align-content: flex-end packs lines to the end of the cross-axis.
Code Example
🎯 align-content: center
align-content: center centers the lines within the container's cross-axis space.
Code Example
↔️ align-content: space-between
align-content: space-between places equal space between lines, with no space at the edges.
Code Example
⏹️ align-content: space-around
align-content: space-around distributes lines with equal space around them, leaving half-space at the edges.