Table of Contents
- Introduction
- Flex Container vs Flex Item Recap
- Main Flexbox Properties Overview
- Flex Container Properties with Examples
displayflex-directionflex-wrapjustify-contentalign-itemsalign-content
- Flex Item Properties with Examples
orderflex-growflex-shrinkflex-basisflexalign-self
- Real-World Examples
- Tips and Best Practices
- Conclusion
1. Introduction
CSS Flexbox is designed to layout elements in a one-dimensional flow (either row or column). It simplifies alignment, spacing, and distribution of elements in a container—even when their sizes are dynamic or unknown. This module breaks down each Flexbox property, explains how and when to use them, and provides visual, real-world examples.
2. Flex Container vs Flex Item Recap
Before diving into properties, it’s essential to recall two primary roles in Flexbox:
- Flex Container: The element with
display: flexordisplay: inline-flex. - Flex Items: The direct children of the flex container.
3. Main Flexbox Properties Overview
Flexbox properties are divided into two categories:
- Container-level: Apply to the flex container and affect the layout and alignment of all items.
- Item-level: Apply to individual items and define how they behave within the flex container.
4. Flex Container Properties with Examples
display
Activates Flexbox layout.
.container {
display: flex; /* or inline-flex */
}
flex-direction
Specifies the direction of the main axis.
/* Options: row | row-reverse | column | column-reverse */
.container {
flex-direction: row;
}
row: Left to right (default)row-reverse: Right to leftcolumn: Top to bottomcolumn-reverse: Bottom to top
flex-wrap
Allows items to wrap to the next line.
.container {
flex-wrap: wrap; /* or nowrap (default), wrap-reverse */
}
justify-content
Aligns items along the main axis.
.container {
justify-content: space-between;
}
| Value | Description |
|---|---|
flex-start | Items packed at start |
flex-end | Items packed at end |
center | Items centered |
space-between | Equal space between items |
space-around | Equal space around items |
space-evenly | Equal space between and around items |
Example:
.container {
display: flex;
justify-content: center;
}
<div class="container">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
align-items
Aligns items along the cross axis.
.container {
align-items: center;
}
| Value | Description |
|---|---|
stretch | (default) Fills the container |
flex-start | Aligned at the start of the cross axis |
flex-end | Aligned at the end |
center | Vertically centered |
baseline | Aligned on text baseline |
align-content
Aligns multiple lines of content when wrapping is enabled.
.container {
flex-wrap: wrap;
align-content: space-between;
}
5. Flex Item Properties with Examples
order
Defines the order of appearance.
.item {
order: 2;
}
Items with smaller values appear first.
flex-grow
Defines how much an item will grow relative to others.
.item {
flex-grow: 1;
}
Items with higher flex-grow values grow faster.
flex-shrink
Defines how much an item will shrink relative to others.
.item {
flex-shrink: 1;
}
flex-basis
Defines the initial size before growing or shrinking.
.item {
flex-basis: 200px;
}
flex (shorthand)
Shorthand for flex-grow, flex-shrink, and flex-basis.
.item {
flex: 1 0 150px;
}
align-self
Overrides align-items for individual items.
.item {
align-self: flex-start;
}
6. Real-World Examples
Centering a Box Vertically and Horizontally
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div class="container">
<div class="box">Centered!</div>
</div>
Navigation Bar with Space Between Items
.navbar {
display: flex;
justify-content: space-between;
}
<div class="navbar">
<div>Logo</div>
<div>Links</div>
<div>Search</div>
</div>
7. Tips and Best Practices
- Use
gapfor spacing: It’s cleaner than using margins..container { display: flex; gap: 20px; } - Combine Flexbox with Media Queries for responsive behavior.
- Avoid nested flex containers unless necessary; it can cause layout complexity.
- Use shorthand
flexinstead of setting grow, shrink, and basis separately for brevity.
8. Conclusion
Flexbox is one of the most intuitive and powerful tools in modern CSS for aligning and distributing space within layouts. Mastering its core properties—like justify-content, align-items, flex-grow, and order—is essential for any frontend developer. Whether you’re building simple components or responsive UI systems, Flexbox ensures that your layouts are both flexible and robust.
