Advanced Flexbox Patterns

Flexbox shines for component-level layout. These reusable patterns solve problems that used to take hacks — keep them in your toolkit and you will reach for them constantly.

The sticky footer

A footer that sits at the bottom even when content is short. Make the page a flex column at least as tall as the viewport, and let the main area grow.

<div class="app"><header>Header</header><main>Short content</main><footer>Always at the bottom</footer></div>

.app{display:flex;flex-direction:column;min-height:220px}
header,footer{background:#1e293b;color:#fff;padding:10px}
main{flex:1;background:#e2e8f0;padding:12px}

Equal-height cards

Flex items in a row are equal height by default (<code>align-items: stretch</code>). Inside each card, make it a flex column and push the button down with <code>margin-top: auto</code> so footers align across cards.

<div class="row"><div class="card"><p>Short</p><a>Go</a></div><div class="card"><p>A longer paragraph that wraps</p><a>Go</a></div></div>

.row{display:flex;gap:10px}
.card{flex:1;display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px}
.card a{margin-top:auto;color:#2563eb}

Push-apart and wrapping toolbars

A single <code>margin-left: auto</code> on one item pushes it and everything after it to the far end — great for toolbars. Add <code>flex-wrap: wrap</code> so toolbars degrade gracefully on small screens.

<div class="bar"><b>Title</b><button>A</button><button class="end">Right</button></div>

.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#f1f5f9;padding:10px;border-radius:8px}
.end{margin-left:auto}

Reliable centering

The most reliable centering in CSS: a flex container with <code>justify-content: center</code> and <code>align-items: center</code>. Works for one item or many, horizontally and vertically.

.col { float: left; min-height: 300px; }

.row { display: flex; } /* children are equal height */