15 CSS Flexbox Layouts

A CSS flexbox layout uses display: flex on a container so its children arrange themselves along one axis — horizontal (flex-direction: row, the default) or vertical (flex-direction: column). Flex children get intelligent sizing via flex-grow (fill remaining space), flex-shrink (give up space when crowded), and flex-basis (their starting size). Alignment along the main axis uses justify-content; along the cross axis uses align-items. Combined with gap, flex-wrap, and the min-width: 0 trick for overflowing text, flexbox is the right tool for any single-axis arrangement: navbars, button rows, card lists, sidebar shells, chat bubbles, pricing columns, and kanban boards.

Use flexbox when items flow along **one axis** at a time — a navbar where logo + nav + actions sit in a row, a vertical sidebar of menu items, a row of pills, a stack of chat bubbles, a kanban board of vertical columns. Use [CSS grid](/layouts/css-grid-layouts/) when you need to control **both rows and columns at once** — a page shell with header / sidebar / main / footer arranged in named regions, a dashboard with cells that span multiple rows and columns, or a card gallery with explicit row and column tracks. The decision rule: if you're thinking 'arrange these in a line,' reach for flexbox; if you're thinking 'place these into a grid,' reach for grid. Both can be combined — a grid page shell with flex navbars inside it is the most common production pattern, and it's how 7 of the 15 demos in this collection are built.

The modern pattern uses min-block-size: 100dvh on body (the dynamic viewport unit handles iOS Safari's address-bar resize correctly, unlike the legacy 100vh), display: flex, flex-direction: column — then flex: 1 on the main content area. The footer naturally sticks to the bottom because main grows to fill any remaining space. No position: absolute, no negative margins, no calc(100vh - footerHeight) hacks. Demo #09 (CSS Flexbox Sticky Footer Layout) ships the full snippet — copy it as-is and the footer sticks at any content length on any device. The pattern degrades gracefully to 100vh for browsers that don't support 100dvh (Safari < 15.4, Chrome < 108) via min-block-size: 100vh; min-block-size: 100dvh; stacked declarations.

Yes. Every layout uses semantic landmark elements — header, nav (with an aria-label), main, aside, and footer — so screen readers expose document structure correctly. Interactive controls are real button and anchor elements with visible focus-visible rings — the kanban demo (Demo #15) keeps focus inside its column when items reorder, and the chat demo (Demo #12) uses aria-live polite on the message list so new bubbles are announced. The navbar (Demo #03) and sidebar (Demo #05) both expose aria-current page on the active link. All demos meet WCAG 2.2 AA contrast (≥ 4.5:1 for body, ≥ 3:1 for UI components) and target Section 508 / EU EAA compliance — audit any of them with axe DevTools or Lighthouse's accessibility audit to verify the color and ARIA pass.

Flex items have an implicit min-width: auto that resolves to their intrinsic content size — so a long URL, an unbreakable word, or an inline code block inside a flex child can push the whole container wider than its parent and break the layout. The fix is one line: min-width: 0 on the offending flex child. This unlocks the normal CSS overflow behavior (overflow: hidden, text-overflow: ellipsis, white-space: nowrap then work as expected). Pair it with flex: 1 1 auto for shrinkable text content and flex-shrink: 0 for fixed-width siblings (icons, indicators). This is the single most common flexbox bug — every demo in this collection that has shrinkable text content (chat #12, navbar #03, magazine #08) applies the min-width: 0 defensively so it never bites users who copy and adapt the code.

**Tailwind CSS** ships utility classes that one-to-one map to flexbox properties: flex = display: flex, flex-row / flex-col, justify-between / items-center / gap-4, flex-1 / flex-shrink-0 / min-w-0. Each demo here translates directly — copy the structural decisions (which child gets flex: 1, which gets min-width: 0) into Tailwind utilities. **Bootstrap 5** uses similar tokens via its d-flex / justify-content-between / align-items-center / flex-fill / flex-shrink-0 utilities — the grid module above is built on flexbox under the hood. **MUI** (Material UI) exposes flexbox via its Stack and Box components and their props (direction, spacing, justifyContent). **Chakra UI** has Flex, HStack, and VStack primitives. **shadcn/ui** components use Tailwind utilities directly so any pattern here works inside a shadcn project unchanged. The underlying CSS knowledge is portable across all five frameworks — these demos teach the pattern; the framework adds syntactic sugar. Want the converted utilities? Drop a demo's CSS into our [CSS to Tailwind converter](/tools/css-to-tailwind-converter/) to see the utility-class equivalent.

True CSS masonry (grid-template-rows: masonry) is still behind a flag in most browsers as of 2026 — it ships in Firefox but isn't in Chrome / Safari stable yet. The cleanest flexbox alternative uses flex-direction: column with multiple columns and a column-count fallback, or — more commonly — three or four vertical flex columns each containing items of varying height, items distributed in render order. Demo #04 (CSS Flexbox Masonry-Style Layout) ships this pattern: three columns side-by-side (display: flex), each column is itself a flex container (flex-direction: column; gap), and items are distributed across columns in render order. The visual result reads as a Pinterest-style masonry. The tradeoff: items aren't auto-balanced across columns (you may end up with one taller column), but it works in every browser today with no JavaScript. When grid-template-rows: masonry ships universally, swap the flex columns for a CSS grid container — the markup stays the same.

Yes — all 15 layouts are MIT licensed and free for personal and commercial use, including in client projects, SaaS products, and design systems. The MIT license requires only that you keep the copyright notice somewhere in your source if you redistribute the code as-is; in production HTML / CSS that you've adapted, no visible attribution is needed. If you ship one of these as part of an open-source UI library, include a one-line credit in your README pointing to https://codefronts.com — that helps the project and is appreciated but not legally required. The code panels show exactly what to copy: the HTML tab is your markup, the CSS tab is your stylesheet, and the JS tab (where present — Demo #15 kanban only) is the optional vanilla JavaScript handler. Every snippet is self-contained, framework-free, and works at any viewport from 320px (mobile) to 1440px+ (desktop wide) without modification.