Build responsive, flexible layouts with the CSS Flexible Box Module. Adjust container properties (direction, wrap, alignment) and item properties (order, grow, shrink, basis). See changes instantly and copy production‑ready CSS.
The CSS Flexible Box Layout (Flexbox) was designed to provide a more efficient way to lay out, align, and distribute space among items in a container, even when their sizes are unknown or dynamic. Unlike block-based layouts, flexbox gives you complete control over direction, alignment, order, and flexibility. It has become the cornerstone of responsive web design and component-based UI architectures.
| Property | Chrome | Firefox | Safari | Edge | Notes |
|---|---|---|---|---|---|
display: flex | 29+ | 28+ | 9+ | 12+ | Full support |
flex-wrap | 29+ | 28+ | 9+ | 12+ | Full support |
gap (flex) | 84+ | 63+ | 14.1+ | 84+ | Modern browsers only |
align-content | 29+ | 28+ | 9+ | 12+ | Full support |
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 1rem;
gap: 1rem;
}
.nav-links {
display: flex;
gap: 1.5rem;
}
@media (max-width: 768px) {
.navbar { flex-direction: column; text-align: center; }
.nav-links { flex-direction: column; gap: 0.5rem; }
}
.card-gallery {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
}
.card {
flex: 1 1 280px; /* grow, shrink, basis */
max-width: 350px;
padding: 1rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* pushes footer to bottom */
}
footer {
background: #333;
color: white;
}
flex-wrap: wrap is set. Without wrap, items will try to fit on one line.| Property | Description | Key Values |
|---|---|---|
flex-direction | Defines main axis direction. | row, column, row-reverse, column-reverse |
flex-wrap | Controls whether items wrap onto multiple lines. | nowrap, wrap, wrap-reverse |
justify-content | Alignment along main axis. | flex-start, center, space-between, space-around, space-evenly |
align-items | Alignment along cross axis (single line). | stretch, flex-start, center, baseline |
flex-grow | Ability for an item to grow relative to siblings. | Number (0 or positive) |
flex-shrink | Ability to shrink when space is limited. | Number (default 1) |
flex-basis | Initial main size of a flex item. | auto, %, px, rem |
order | Controls visual ordering independent of source. | Integer (default 0) |