Deep Dive: CSS Flexbox
A comprehensive guide to mastering modern CSS layout systems
Flexbox: One-Dimensional Layout
Flexbox is designed for laying out items in a single direction — either as a row or a column. It excels at distributing space and aligning content within a container, with intelligent content-aware sizing.
Flex Direction: The Main Axis
The flex-direction property establishes the main axis, determining how flex items are placed in the flex container.
flex-direction: row; /* Default: left to right */
→ Items flow horizontally, main axis is horizontal, cross axis is vertical
flex-direction: row-reverse; /* Right to left */
← Reverses the order, useful for RTL languages
flex-direction: column; /* Top to bottom */
↓ Main axis becomes vertical, cross axis is horizontal
flex-direction: column-reverse; /* Bottom to top */
↑ Stacks from bottom to top
Justify Content: Space Distribution
Controls alignment and spacing along the main axis. Think of it as distributing free space between and around items.
justify-content: flex-start; /* Default */
Items packed at the start of the main axis
justify-content: flex-end;
Items packed at the end of the main axis
justify-content: center;
Items centered along the main axis
justify-content: space-between;
First item at start, last at end, equal space between
justify-content: space-around;
Equal space around each item (edges get half space)
justify-content: space-evenly;
Equal space between items and edges
Align Items: Cross Axis Alignment
Controls alignment on the cross axis (perpendicular to main axis). This is where vertical centering magic happens!
align-items: stretch; /* Default */
Items stretch to fill the container (unless they have explicit size)
align-items: flex-start;
Items aligned to the start of the cross axis
align-items: center;
Perfect vertical centering (when main axis is horizontal)
align-items: baseline;
Items aligned by their text baseline (great for typography)
Flex Growth, Shrinking & Basis
These properties control how flex items grow or shrink to fit available space. The secret sauce of flexible layouts!
flex-grow
flex-grow: 1; /* Item will grow to fill available space */
Get Senthil’s stories in your inbox
Join Medium for free to get updates from this writer.
Defines the ability for an item to grow. If all items have flex-grow: 1, they’ll share space equally. If one has flex-grow: 2, it takes twice as much space.
flex-shrink
flex-shrink: 1; /* Default - item can shrink */
Defines the ability to shrink if necessary. Set to 0 to prevent an item from shrinking below its content size.
flex-basis
flex-basis: 200px; /* Starting size before growing/shrinking */
Defines the initial size of an item before space distribution. Can be px, %, auto, or content.
Shorthand: flex: 1 1 auto;= flex-grow: 1, flex-shrink: 1, flex-basis: auto
Flex Wrap & Multi-line Layouts
Controls whether flex items are forced onto one line or can wrap onto multiple lines.
flex-wrap: nowrap; /* Default - single line */
All items forced onto one line, may cause overflow
flex-wrap: wrap; /* Multi-line, top to bottom */
Items wrap to new lines as needed
flex-wrap: wrap-reverse; /* Multi-line, bottom to top */
New lines appear above the previous line
Align Content: Multi-line Spacing
When flex-wrap is enabled and you have multiple lines, align-content controls spacing between lines.
align-content: flex-start;
Lines packed at the start
align-content: space-between;
Lines evenly distributed, first at start, last at end
align-content: stretch; /* Default */
Lines stretch to fill available space
Note: align-content has no effect when there’s only one line of flex items.
Choosing the Right Tool
Use Flexbox When:
- ✓You need a one-dimensional layout (row OR column)
- ✓Content should determine sizing
- ✓Building UI components (buttons, cards, navbars)
- ✓You need items to wrap dynamically
- ✓Alignment and spacing are the main concerns
Use Grid When:
- ✓You need a two-dimensional layout (rows AND columns)
- ✓Layout structure should determine sizing
- ✓Building page layouts and complex structures
- ✓You need precise control over placement
- ✓Items need to overlap or align across multiple dimensions
💡 The Best Approach
Use both together! Grid for the overall page structure, Flexbox for components within those grid areas.
Example: Grid for header/sidebar/content layout, then Flexbox for navbar items, card content, and form fields.
Browser Support
Flexbox
Excellent support across all modern browsers. IE11 has partial support with some bugs. Use autoprefixer for maximum compatibility.
