Last updated
Common Flexbox Patterns
- Horizontal centering:
justify-content: center - Vertical centering:
align-items: center - Full centering: both of the above
- Equal-width columns:
flex: 1on each item - Fixed sidebar + flexible main:
flex: 0 0 Npx+flex: 1 - Push last item to end:
margin-left: autoon the last item - Responsive wrap:
flex-wrap: wrap+flex: 1 1 Npx
The CSS Flexbox Generator on TechConverter.me provides a visual interface for all flexbox properties with labeled items that show the effect of each change in real time. Configure your layout, copy the generated CSS, and paste it directly into your stylesheet.
Examples
Example 1: Flexbox Property Reference
The core flexbox properties and their values:
/* Container properties */
.flex-container {
display: flex;
/* Direction */
flex-direction: row; /* row | row-reverse | column | column-reverse */
/* Wrapping */
flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
/* Main axis alignment */
justify-content: flex-start; /* flex-start | flex-end | center |
space-between | space-around | space-evenly */
/* Cross axis alignment */
align-items: stretch; /* stretch | flex-start | flex-end |
center | baseline */
/* Multi-line cross axis */
align-content: normal; /* normal | flex-start | flex-end |
center | space-between | space-around */
/* Spacing */
gap: 1rem; /* row-gap and column-gap */
}
/* Item properties */
.flex-item {
flex-grow: 0; /* how much to grow relative to siblings */
flex-shrink: 1; /* how much to shrink relative to siblings */
flex-basis: auto; /* initial size before growing/shrinking */
flex: 0 1 auto; /* shorthand: grow shrink basis */
align-self: auto; /* override container's align-items for this item */
order: 0; /* visual order (lower = earlier) */
}
Example 2: Navigation Bar Layout
A horizontal navigation bar with logo on the left and links on the right:
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
height: 64px;
background: #1a1a2e;
}
.navbar-logo {
flex-shrink: 0; /* prevent logo from shrinking */
font-size: 1.5rem;
font-weight: 700;
color: white;
}
.navbar-links {
display: flex;
align-items: center;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
Example 3: Card Grid with Equal Height Cards
A responsive card grid where all cards in a row have equal height:
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card {
flex: 1 1 300px; /* grow, shrink, min-width 300px */
display: flex;
flex-direction: column; /* stack card content vertically */
background: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card-body {
flex: 1; /* takes up remaining space, pushing footer down */
}
.card-footer {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}
/* Result: all cards in a row have equal height,
and card footers are always at the bottom */