Flexbox
The flexible box layout - your go-to tool for one-dimensional layouts
Flexbox Fundamentals
Flexbox makes it easy to align and distribute space among items in a container, even when their size is unknown or dynamic.
Flex Direction
Row (default)
Column
/* Flex container */
.container {
display: flex;
flex-direction: row; /* default */
}
/* Other directions */
.column { flex-direction: column; }
.row-reverse { flex-direction: row-reverse; }
.column-reverse { flex-direction: column-reverse; }Flex Wrap
Flex-wrap: wrap
/* Allow items to wrap */
.container {
display: flex;
flex-wrap: wrap;
}
/* Shorthand */
.container {
display: flex;
flex-flow: row wrap;
}Flex Grow, Shrink & Basis
/* Flex item properties */
.item {
flex-grow: 0; /* Don't grow */
flex-shrink: 1; /* Can shrink */
flex-basis: auto; /* Base size */
}
/* Shorthand */
.item {
flex: 1; /* grow: 1, shrink: 1, basis: 0 */
}
/* Common patterns */
.item { flex: 1 1 auto; } /* Flexible */
.item { flex: 0 0 200px; } /* Fixed width */Gap Property
Gap: 1rem
/* Modern gap property */
.container {
display: flex;
gap: 1rem; /* All directions */
}
/* Separate row and column gaps */
.container {
row-gap: 1rem;
column-gap: 2rem;
/* or */
gap: 1rem 2rem;
}Alignment & Justification
Flexbox shines when it comes to alignment. Control both main axis and cross axis alignment with ease.
Justify Content (Main Axis)
flex-start
center
flex-end
space-between
space-around
space-evenly
/* Main axis alignment */
.container {
display: flex;
justify-content: flex-start; /* default */
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}Align Items (Cross Axis)
flex-start
center
flex-end
stretch
baseline
/* Cross axis alignment */
.container {
display: flex;
align-items: stretch; /* default */
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
}
/* Individual item alignment */
.item {
align-self: auto; /* default */
align-self: center;
}Perfect Centering
/* The holy grail of centering */
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
/* Even simpler with place-content */
.container {
display: flex;
place-content: center;
}Interactive Flexbox Playground
Experiment with different flexbox properties and see the results in real-time!
Container Properties
Item Properties
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}Common Flexbox Patterns
Real-world flexbox patterns you'll use again and again in your projects.
Navigation Bar
/* Responsive navigation */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.nav-menu {
display: flex;
gap: 2rem;
list-style: none;
}
/* Push items apart */
.nav-brand { margin-right: auto; }Card Layout
Card 1
Flexible card that grows to fill space.
Card 2
All cards maintain equal height.
Card 3
Button always at the bottom.
/* Equal height cards */
.cards {
display: flex;
gap: 1rem;
}
.card {
flex: 1;
display: flex;
flex-direction: column;
}
.card p {
flex: 1; /* Push button to bottom */
}Media Object
Media Object Pattern
Image on the left, content on the right. A classic pattern made simple with flexbox.
/* Media object pattern */
.media {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.media-image {
flex: 0 0 100px; /* Fixed width */
}
.media-content {
flex: 1; /* Take remaining space */
}Sticky Footer
/* Sticky footer pattern */
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header, .footer {
flex: 0 0 auto;
}
.main {
flex: 1 0 auto;
}Input Groups
/* Input group pattern */
.input-group {
display: flex;
}
.input-group input {
flex: 1;
border-radius: 0;
}
.input-addon {
display: flex;
align-items: center;
padding: 0 1rem;
background: var(--colour-surface);
}Holy Grail Layout
/* Holy grail layout */
.layout {
display: flex;
gap: 1rem;
}
.sidebar-left,
.sidebar-right {
flex: 0 0 200px; /* Fixed width */
}
.main-content {
flex: 1; /* Flexible center */
}
/* Responsive */
@media (max-width: 768px) {
.layout { flex-direction: column; }
}Flexbox Pro Tips
Use Gap Instead of Margins
The gap property is cleaner and doesn't require nth-child selectors to remove edge margins.
Min-Width: 0 for Truncation
Flex items have min-width: auto by default. Set to 0 to allow text truncation.
Flex: 1 1 0 vs Flex: 1
Flex: 1 is shorthand for flex: 1 1 0, which makes items grow equally from 0 basis.
Margin Auto for Spacing
Use margin-left: auto to push items to the right, creating smart spacing.