What is Flexbox? How it works: containers and items
Flexbox, short for Flexible Box Layout, is a CSS module that provides a more efficient way to design flexible and responsive layouts by arranging elements in a one-dimensional row or column, even when their size is unknown or dynamic.
What Is Flexbox?
Flexbox is used to lay out items in a single direction (either horizontal or vertical) with the ability to control spacing, alignment, and distribution of elements—even if their sizes are different.
It is particularly useful for:
- Creating navigation bars
- Aligning form elements
- Building responsive grids
- Designing layouts without using floats or positioning hacks
How Flexbox Works: Key Concepts
1. Flex Container
To use Flexbox, define a parent element as a flex container using display: flex.
.container {
display: flex;
}
- This changes the behavior of its child elements, turning them into flex items.
2. Flex Direction
Use flex-direction to define the main axis:
- Row (default): left to right
- Row-reverse: right to left
- Column: top to bottom
- Column-reverse: bottom to top
.container {
display: flex;
flex-direction: row;
}
3. Main Axis vs Cross Axis
- Main Axis: Direction in which flex items are placed (flex-direction)
- Cross Axis: Perpendicular to the main axis
E.g., for flex-direction: row, the main axis is horizontal, cross axis is vertical.
Flex Items: How They Behave
4. Justify Content (Main Axis Alignment)
Controls how items are spaced horizontally (if in a row):
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
5. Align Items (Cross Axis Alignment)
Aligns items vertically (if in a row):
align-items: stretch | flex-start | flex-end | center | baseline;
6. Align Self (Individual Item Alignment)
Overrides align-items for a specific item:
.item {
align-self: center;
}
Sizing & Flex Behavior
7. Flex Property (Shorthand)
.item {
flex: 1;
}
The flex shorthand is:
flex: grow shrink basis;
Example:
flex: 1 0 auto;
This means:
- Grow: how much the item will grow (relative to others)
- Shrink: how much the item can shrink
- Basis: default size before growing/shrinking
Practical Example:
<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
</div>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
}
.item {
background: #ccc;
padding: 10px;
}
This will space out the items evenly across the container and center them vertically.
Summary:
| Concept | Description |
|---|---|
| display: flex | Declares a flex container |
| flex-direction | Sets layout direction (row or column) |
| justify-content | Aligns items on the main axis |
| align-items | Aligns items on the cross axis |
| flex | Controls growth, shrinkage, and base size |
Key Flexbox properties: justify-content, align-items, flex-direction, flex-wrap
Flexbox makes layout design flexible and intuitive by using a few powerful properties. Here’s a breakdown of the most essential Flexbox properties used on the flex container:
Justify-content – Main Axis Alignment
Purpose: Aligns items horizontally (if flex-direction: row) or vertically (if flex-direction: column) along the main axis.
Values:
- flex-start – Items align to the start of the container
- flex-end – Items align to the end
- center – Items align to the center
- space-between – Equal space between items (no space at ends)
- space-around – Equal space around each item
- space-evenly – Equal space between and around items
.container {
display: flex;
justify-content: space-between;
}
align-items – Cross Axis Alignment
Purpose: Aligns items perpendicularly to the main axis, along the cross axis.
Values:
- stretch – (default) Items stretch to fill container height/width
- flex-start – Align to start of cross axis
- flex-end – Align to end of cross axis
- center – Align in the center
- baseline – Align items by their text baselines
.container {
display: flex;
align-items: center;
}
flex-direction – Main Axis Direction
Purpose: Defines the direction in which items are placed inside the flex container.
Values:
- row – Left to right (default)
- row-reverse – Right to left
- column – Top to bottom
- column-reverse – Bottom to top
.container {
display: flex;
flex-direction: column;
}
flex-wrap – Wrapping Behavior
Purpose: Controls whether flex items should wrap or stay in a single line.
Values:
- nowrap – (default) All items in one line
- wrap – Items wrap onto multiple lines
- wrap-reverse – Items wrap onto multiple lines in reverse order
.container {
display: flex;
flex-wrap: wrap;
}
Example Combining All:
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}
Summary Table:
| Property | Function | Key Use |
|---|---|---|
| justify-content | Aligns items on main axis | Spacing between/around items |
| align-items | Aligns items on cross axis | Vertical alignment in a row layout |
| flex-direction | Sets direction of item layout | Horizontal or vertical layout |
| flex-wrap | Allows or prevents wrapping | Responsive layouts with wrapping |
Building responsive layouts with Flexbox
Flexbox (Flexible Box Layout) is a modern CSS layout system that makes it easy to create responsive, fluid layouts without using float hacks or complex media queries. Here’s a detailed look at how to build responsive designs using Flexbox.
Why Flexbox for Responsive Layouts?
- Flexbox adapts to screen sizes automatically by
- Distributing available space among items
- Allowing items to grow/shrink dynamically
- Supporting wrapping into multiple lines
It works well for both horizontal (rows) and vertical (columns) layout needs—perfect for responsive grids, navbars, forms, and more.
Key Techniques for Responsive Layouts with Flexbox
1. Enable Flex Behavior
Start by turning your container into a flexbox:
.container {
display: flex;
}
This activates Flexbox and allows its properties to take effect.
2. Use flex-wrap to Allow Wrapping
By default, Flexbox tries to keep items on one line. For responsive layouts,
allow items to wrap to the next line when space runs out:
.container {
flex-wrap: wrap;
}
- Combine with flex-direction: row or column as needed.
3. Make Items Flexible with flex
Each item can be allowed to grow/shrink with the flex property:
.item {
flex: 1; /* grow equally */
}
Or set a base width and allow growth/shrink:
.item {
flex: 1 1 200px; /* grow, shrink, base size */
}
- This ensures your layout adjusts to screen sizes smoothly.
4. Align and Distribute Items
Control alignment and spacing based on available space:
.container {
justify-content: space-between; /* horizontal alignment */
align-items: stretch; /* vertical alignment */
}
- These properties help maintain readable and balanced layouts.
5. Responsive Column Layout Example
<div class=”container”>
<div class=”item”>Column 1</div>
<div class=”item”>Column 2</div>
<div class=”item”>Column 3</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.item {
flex: 1 1 300px;
min-width: 250px;
background: #f2f2f2;
padding: 1rem;
}
This layout will show 3 columns on large screens, 2 on medium, and stack vertically on small screens—all without media queries.
6. Responsive Navbar Example
<nav class=”navbar”>
<div>Logo</div>
<ul class=”menu”>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
.navbar {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.menu {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
- This navbar will adjust to smaller screens by wrapping the menu items naturally.
Summary:
| Tip | Benefit |
|---|---|
| Use flex-wrap: wrap | Ensures content wraps on smaller screens |
| Apply flex: 1 or flex-basis | Distributes space responsively |
| Combine with gap | Adds spacing without margins |
| Use min-width for stability | Prevents items from shrinking too small |
| Avoid fixed widths | Makes layout more fluid |
Would you like a codepen-style live preview or a mini-project using these techniques?
Aligning items and distributing space in flexible containers
When using Flexbox, aligning items and distributing space within a container becomes intuitive and powerful. These tasks are handled primarily by justify-content, align-items, align-content, and gap properties on the flex container, giving you precise control over layout behavior.
1. justify-content – Distribute Space Along Main Axis
Used to control the horizontal spacing (if flex-direction: row) or vertical (if column).
Common Values:
- flex-start: Items aligned to the start
- flex-end: Items aligned to the end
- center: Items centered along the axis
- space-between: Equal space between items
- space-around: Equal space around items (including ends)
- space-evenly: Equal space between and around all items
.container {
display: flex;
justify-content: space-between;
}
2. align-items – Align Items on Cross Axis
This property aligns all items perpendicular to the main axis (i.e., vertical alignment in a horizontal layout).
Values:
- stretch (default): Items stretch to fill container
- flex-start: Align items to the start of cross axis
- flex-end: Align items to the end
- center: Vertically center items
- baseline: Align based on text baseline
.container {
display: flex;
align-items: center;
}
3. align-content – Align Multiple Rows (Cross Axis)
When flex-wrap: wrap is used and items span multiple lines, align-content controls the alignment of the whole row group.
Values:
- flex-start, flex-end, center: Align rows as a group
- space-between, space-around, space-evenly: Distribute space between rows
- stretch: Stretch rows to fill container height
.container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
4. gap – Spacing Between Items
The gap property adds consistent spacing between flex items (both in rows and columns), without needing margins.
.container {
display: flex;
gap: 1rem;
}
- This is cleaner than using individual margins and supports both directions if wrapping is enabled.
Practical Example:
<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
</div>
.container {
display: flex;
justify-content: space-around;
align-items: center;
gap: 20px;
height: 200px;
border: 1px solid #ccc;
}
.item {
background: #e0e0e0;
padding: 20px;
}
This layout:
- Horizontally spaces items with space-around
- Vertically centers them
- Adds equal gaps between them
- Ensures fluid responsiveness
Summary Table:
| Property | Controls | Axis | When to Use |
|---|---|---|---|
| justify-content | Item distribution | Main axis | Space between/around items |
| align-items | Item alignment | Cross axis | Align items top/bottom or center |
| align-content | Row alignment | Cross axis | Multi-row layouts with wrapping |
| gap | Item spacing | Both axes | Clean spacing between flex items |
Would you like a Flexbox alignment cheat sheet or a demo layout template to explore these visually?