Alignment is where Flexbox truly shines. CSS has historically struggled with vertical centering and distributing space, but Flexbox makes these tasks trivial. With properties like justify-content, align-items, and align-content, you can align items along both axes, distribute space evenly, and create perfectly centered layouts with just a few lines of code.
Alignment Overview
Flexbox provides several properties for aligning items. Understanding which property affects which axis is crucial:
Alignment Properties
| Property | Values | Description |
|---|---|---|
justify-content | Container property | Aligns items along the MAIN axis |
align-items | Container property | Aligns items along the CROSS axis |
align-content | Container property | Aligns wrapped lines along the CROSS axis (multi-line only) |
align-self | Item property | Overrides align-items for individual items |
Remember: justify-content works on the main axis (horizontal by default), align-items and align-content work on the cross axis (vertical by default). When flex-direction: column, these axes swap!
justify-content
The justify-content property aligns flex items along the main axis and distributes extra space.
/* justify-content values */
.container {
display: flex;
justify-content: flex-start; /* Default - start of main axis */
justify-content: flex-end; /* End of main axis */
justify-content: center; /* Center of main axis */
justify-content: space-between; /* Space between items */
justify-content: space-around; /* Space around items */
justify-content: space-evenly; /* Equal space everywhere */
}
/* Most common uses */
.container {
display: flex;
justify-content: center; /* Center items horizontally */
}
.container {
display: flex;
justify-content: space-between; /* First and last at edges */
}Try different justify-content values
Experiment with flexbox properties
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}justify-content Values
Understanding Space Distribution
space-between
Equal space between items. First and last items touch edges.
space-around
Equal space around items. Edge space = half of between space.
space-evenly
Equal space everywhere. Edge space = between space.
Practical justify-content Examples
Practical justify-content Uses
align-items
The align-items property aligns flex items along the cross axis. It's perfect for vertical alignment (in default row direction).
/* align-items values */
.container {
display: flex;
align-items: stretch; /* Default - stretch to fill */
align-items: flex-start; /* Top of cross axis */
align-items: flex-end; /* Bottom of cross axis */
align-items: center; /* Center of cross axis */
align-items: baseline; /* Align text baselines */
}
/* Most common: vertical centering */
.container {
display: flex;
align-items: center; /* Vertically center items */
}
/* Perfect centering (both axes) */
.container {
display: flex;
justify-content: center; /* Horizontal */
align-items: center; /* Vertical */
}align-items Values
Perfect Centering
Perfect Centering with Flexbox
🎯 Centering Made Easy:
Before Flexbox, centering (especially vertical centering) required complex CSS hacks. With Flexbox, it's just two properties: justify-content: center and align-items: center. This is one of Flexbox's killer features!
align-content
The align-content property aligns flex lines along the cross axis when there's extra space. It only works with multi-line flex containers (flex-wrap: wrap).
/* align-content values (multi-line only!) */
.container {
display: flex;
flex-wrap: wrap; /* Required for align-content to work */
align-content: stretch; /* Default - stretch lines */
align-content: flex-start; /* Lines at start */
align-content: flex-end; /* Lines at end */
align-content: center; /* Lines centered */
align-content: space-between; /* Space between lines */
align-content: space-around; /* Space around lines */
align-content: space-evenly; /* Even space */
}
/* align-content only affects wrapped content */
.container {
display: flex;
flex-wrap: wrap;
align-content: center; /* Centers wrapped lines */
}align-content Values
align-items vs align-content: align-items aligns individual items within their line (single or multi-line). align-content aligns entire lines (only works with multi-line wrapping). If you don't have flex-wrap: wrap, align-content has no effect.
align-self
The align-self property allows individual flex items to override the container's align-items value.
/* Container sets default alignment */
.container {
display: flex;
align-items: flex-start; /* All items align to start */
}
/* Individual item overrides alignment */
.item {
align-self: auto; /* Default - use container's align-items */
align-self: flex-start; /* Align this item to start */
align-self: flex-end; /* Align this item to end */
align-self: center; /* Center this item */
align-self: baseline; /* Align to baseline */
align-self: stretch; /* Stretch this item */
}
/* Example: spotlight one item */
.container {
display: flex;
align-items: flex-start;
}
.special-item {
align-self: center; /* Only this item centered */
}align-self for Individual Items
Practical align-self Example
Profile Card with align-self
place-content and place-items
Modern CSS provides shorthand properties for alignment:
/* place-content: shorthand for align-content and justify-content */
.container {
display: flex;
flex-wrap: wrap;
place-content: center; /* Both axes centered */
place-content: start end; /* align-content: start, justify-content: end */
}
/* Equivalent to: */
.container {
align-content: center;
justify-content: center;
}
/* place-items: shorthand for align-items and justify-items (Grid) */
.container {
display: flex;
place-items: center; /* Center items on cross axis */
}
/* Perfect centering shorthand */
.container {
display: flex;
place-content: center;
place-items: center;
}place-content and place-items
Real-World Layout Examples
Card Layout with Mixed Alignment
Feature Cards Layout
Header with Navigation
Header with Navigation
Key Takeaways
- justify-content: Aligns items along the main axis (horizontal by default)
- align-items: Aligns items along the cross axis (vertical by default)
- align-content: Aligns wrapped lines along cross axis (multi-line only)
- align-self: Overrides align-items for individual items
- Perfect centering:
justify-content: center+align-items: center space-between: Equal space between items, edges touchspace-around: Equal space around items, edge = half betweenspace-evenly: Equal space everywherestretchis default for align-items (items fill container)baselinealigns text baselines across items- align-content requires
flex-wrap: wrapto work - Shorthand:
place-contentandplace-items
What's Next?
Now that you've mastered Flexbox alignment, you're ready to learn about Flex Item Properties. In the next lesson, we'll explore how individual flex items can grow, shrink, and size themselves using flex-grow, flex-shrink, flex-basis, and the flex shorthand. These properties give you fine-grained control over how items behave within flex containers.
Flexbox alignment is where the layout magic happens—centering, distributing space, and aligning items became trivially easy compared to pre-Flexbox techniques. Combined with what you'll learn about flex item properties, you'll have complete mastery over Flexbox layouts!