Flexbox shines for common UI patterns. Here are the most useful ones.
Logo on the left, links on the right, vertically centred.
Cards that wrap and fill available space evenly.
Works even when you don't know the height.
Push the footer to the bottom of the page regardless of content length.
/* 1. Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 64px;
}
/* 2. Card grid */
.cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card { flex: 1 1 280px; }
/* 3. Full-page centered hero */
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* 4. Sticky footer */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }
footer { /* stays at bottom */ }