Real-World Flexbox Patterns
Apply Flexbox to common UI patterns - responsive navigation bars, card layouts, media objects, form layouts, and footer alignment. These are the patterns you will use in every real project.
Common Patterns
The most useful Flexbox patterns solve problems that CSS struggled with for decades. The media object (image + text side by side) uses flex with a fixed-width image and flex: 1 text. The input group (input + button) uses flex with input having flex: 1. The stacked card layout uses flex-direction: column with the card body having flex: 1 to push the footer down. Split navigation (logo left, links right) uses justify-content: space-between.
Flexbox is ideal for one-dimensional layouts (row or column)
Pattern Code Examples
/* Media object: image + text */
.media {
display: flex;
gap: 16px;
align-items: flex-start;
}
.media img {
flex: 0 0 80px; /* Don't grow, don't shrink, 80px wide */
border-radius: 50%;
}
.media-body {
flex: 1; /* Fill remaining space */
}
/* Input group: input with attached button */
.input-group {
display: flex;
}
.input-group input {
flex: 1;
border: 2px solid #ddd;
border-right: none;
padding: 10px 16px;
border-radius: 8px 0 0 8px;
}
.input-group button {
border-radius: 0 8px 8px 0;
padding: 10px 20px;
}
/* Holy grail layout */
.holy-grail {
display: flex;
}
.holy-grail .sidebar { flex: 0 0 250px; }
.holy-grail .content { flex: 1; }
.holy-grail .aside { flex: 0 0 200px; }
/* Card with footer at bottom */
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-body { flex: 1; } /* Pushes footer down */
.card-footer { /* Always at bottom */ }Tip
The input group pattern (flex container + input with flex: 1 + button) is one of the most-used UI components. The input expands to fill all available space while the button stays its natural width. This works for search bars, newsletter forms, and URL bars.
Common Mistake
Nesting Flexbox containers without purpose. Every flex container adds layout complexity. Only use flex when you need items distributed in a row or column. Overusing nested flex containers creates unpredictable sizing behavior and makes debugging hard.
Practice Task
Build these real-world Flexbox components: (1) a media object (avatar + text side by side using flex: 0 0 48px on avatar, flex: 1 on text), (2) an input group (search bar + button), (3) a card where the card body has flex: 1 so the footer always stays at the bottom.