15 CSS Flexbox Layouts

MIT licensedlayoutscss-only

A CSS flexbox layout uses native display: flex to arrange items along one axis with intelligent sizing, spacing, and alignment. These 15 hand-coded layouts are production-ready flexbox templates for the patterns developers ship every day — holy grail page shells, responsive card grids, sticky navbars, sidebar dashboards, pricing tables, sticky footers, kanban boards, chat interfaces and more. Copy the CSS, drop in your content, and ship.

15 unique layouts 14 Pure CSS 1 CSS + JS 100% copy-paste ready Published
01 / 15
CSS Flexbox Holy Grail Layout
Pure CSS
CSS Flexbox Holy Grail Layout — preview
A classic holy grail layout — fixed header, footer, left sidebar, right aside, and expanding main column — built entirely with nested flex containers and no CSS Grid.
Live Demo Try it
02 / 15
CSS Flexbox Card Grid Layout
Pure CSS
CSS Flexbox Card Grid Layout — preview
A responsive flex card grid with a featured wide card and uniform standard cards that wrap automatically — no media queries required for the basic reflow.
Live Demo Try it
03 / 15
CSS Flexbox Navigation Bar
Pure CSS
CSS Flexbox Navigation Bar — preview
Three navigation bar variants — space-between spread, absolutely centered links with flex spacers, and a pill-style active-highlight nav — all built with flex alignment tricks.
Live Demo Try it
04 / 15
CSS Flexbox Masonry-Style Layout
Pure CSS
CSS Flexbox Masonry-Style Layout — preview
A multi-column masonry-style card waterfall using <code>flex-direction: column</code> and <code>flex-wrap: wrap</code> with a fixed container height — no JavaScript required.
Live Demo Try it
05 / 15
CSS Flexbox Sidebar Dashboard Layout
Pure CSS
CSS Flexbox Sidebar Dashboard Layout — preview
A full app-shell dashboard with a fixed-width flex sidebar, collapsible nav groups, top header bar, stat cards row, and a main content area — all wired with flexbox.
Live Demo Try it
06 / 15
CSS Flexbox Responsive Product Cards
Pure CSS
CSS Flexbox Responsive Product Cards — preview
An e-commerce product card grid using <code>flex: 1 1 180px</code> with a max-width cap — cards reflow from four columns to one with no JavaScript or media queries.
Live Demo Try it
07 / 15
CSS Flexbox Pricing Table Layout
Pure CSS
CSS Flexbox Pricing Table Layout — preview
A three-tier pricing table with equal-height columns, a scaled featured plan, and flex-driven feature lists — all columns stretch to identical height without JavaScript.
Live Demo Try it
08 / 15
CSS Flexbox Magazine Article Layout
Pure CSS
CSS Flexbox Magazine Article Layout — preview
A classic editorial magazine layout with a two-thirds article column, one-third sidebar, drop cap, pull quotes, and a multi-column body text — built with flex and CSS columns.
Live Demo Try it
09 / 15
CSS Flexbox Sticky Footer Layout
Pure CSS
CSS Flexbox Sticky Footer Layout — preview
The definitive flexbox sticky footer pattern — a column flex wrapper with <code>min-height: 100%</code> and <code>flex: 1</code> on the main content pushes the footer to the bottom on any page length.
Live Demo Try it
10 / 15
CSS Flexbox Centered Hero Section
Pure CSS
CSS Flexbox Centered Hero Section — preview
A full-bleed hero section with perfect flex centering, animated gradient orbs, a headline group, subtext, and a CTA button row — demonstrating multi-axis flex alignment.
Live Demo Try it
11 / 15
CSS Flexbox Timeline Layout
Pure CSS
CSS Flexbox Timeline Layout — preview
A vertical event timeline where each entry is a flex row — a narrow connector column with a dot and line, and an expanding content card — creating a clean left-rail chronology.
Live Demo Try it
12 / 15
CSS Flexbox Chat Interface Layout
Pure CSS
CSS Flexbox Chat Interface Layout — preview
A messaging UI with a flex-row shell (contacts sidebar + message pane), scrollable message thread with pinned input bar, and live send interaction — all flex-driven.
Live Demo Try it
Advertisement
13 / 15
CSS Flexbox Mosaic Image Gallery
Pure CSS
CSS Flexbox Mosaic Image Gallery — preview
A photo mosaic gallery with three flex columns of varying weights (<code>flex: 2</code>, <code>flex: 1</code>, <code>flex: 1.5</code>) and variable-height tiles, each captioned with a category tag and title — creating an asymmetric editorial grid like Unsplash or Pinterest.
Live Demo Try it
14 / 15
CSS Flexbox Form Layout
Pure CSS
CSS Flexbox Form Layout — preview
A structured form layout using flex for single-column fields, inline multi-column field rows, and input groups with prefix/suffix addons — all without tables or floats.
Live Demo Try it
15 / 15
CSS Flexbox Kanban Board Layout
CSS + JS
CSS Flexbox Kanban Board Layout — preview
A dark-themed Kanban board with five status columns, draggable task cards, color-coded priority badges, avatar assignments, and a progress bar — built with a horizontal flex shell.
Live Demo Try it
FAQ

Frequently asked questions

What is a CSS flexbox layout?
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.
When should I use flexbox instead of CSS grid?
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.
How do I build a sticky footer with flexbox in 2026?
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 `
` 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.
Are these flexbox layouts WCAG-accessible?
Yes. Every layout uses semantic landmarks (`
`, `
Why does my flexbox text overflow its container?
Flex items have an implicit `min-width: auto` that resolves to their intrinsic content size — so a long URL, an unbreakable word, or a `` 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.
How do these flexbox layouts compare to Tailwind, Bootstrap, MUI, Chakra, and shadcn/ui?
**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 `` and `` props (`direction`, `spacing`, `justifyContent`). **Chakra UI** has ``, ``, `` 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.
What's the right flexbox alternative to CSS masonry?
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.
Are these CSS flexbox layouts free and how should I attribute them?
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.

Related collections

CSS Center a Div preview

CSS Center a Div

5

The complete guide to centering a div in CSS in 2026 — covering all 5 production techniques with live interactive demos. <strong>Flexbox</strong> (the modern default, works for 95% of cases): <code>display: flex; align-items: center; justify-content: center</code> on the parent. <strong>CSS Grid</strong> (one-line shorthand): <code>display: grid; place-items: center</code>. <strong>Absolute positioning + transform</strong> (for overlays and modals): <code>position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)</code>. <strong>Margin auto</strong> (for block elements with a known width): <code>margin: 0 auto</code> (horizontal only) or <code>margin: auto</code> with <code>position: absolute</code> + <code>inset: 0</code> (both axes). <strong>All methods side-by-side comparison</strong> — see every technique render the same content with visible axis crosshairs so you can see exactly where each method lands the element. All 5 demos are 100% pure CSS, MIT-licensed, copy-paste ready, with detailed explanations of which method to use when. Works in every modern browser (Chrome, Safari, Firefox, Edge), no JavaScript required.

css center a div center a div center div css Responsive
10 CSS Feature Sections preview

10 CSS Feature Sections

10

10 hand-coded CSS feature section templates covering the patterns landing pages actually need in 2026 — icon grid with stats strip, Apple-style bento grid layout, dark glassmorphism with animated blobs, scroll-reveal alternating rows, developer SDK with syntax-highlighted code preview, side-by-side comparison table with pricing cards, full SaaS hero with mesh-gradient + social proof, 3D mousemove tilt cards, parchment-cream floating phone mockup, and Linear-style product roadmap timeline. 7 of 10 demos are 100% pure CSS — drop into any stack. The 3 JS-enhanced demos (scroll-reveal, 3D tilt, timeline-glow) degrade gracefully if JavaScript is disabled. Every demo respects prefers-reduced-motion, uses scoped .fsNN__* class names so multiple can coexist, and ships MIT-licensed.

css feature section feature section css feature sections Responsive
15 CSS Footer Designs preview

15 CSS Footer Designs

15

15 hand-coded CSS footer designs — aurora-drift, newspaper masthead, mega multi-column, CTA stripe, trust badges, vinyl record, neon sign, FAQ drawer, language switcher, hover wave and more. Copy-paste ready.

footer page footer css footer Responsive

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →