CSS Flexbox Layout Examples

Explore ready-to-use CSS Flexbox layout starter templates and design patterns. Copy clean CSS code snippets or launch any pattern directly in the Flexbox Labs interactive playground.

Open Playground Launcher

1. Centered Hero Box

Achieve horizontal and vertical centering effortlessly using justify-content: center and align-items: center.

Centered Content

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Open in Playground

2. Responsive Navigation Bar

Space out branding, links, and action controls cleanly across a header line with justify-content: space-between.

Logo

Home

Docs

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Open in Playground

3. Equal-Height Card Grid

Cards automatically wrap and match each other's height using flex-wrap: wrap and flex: 1 1 200px.

Card A

Card B

Card C

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 200px;
}

Open in Playground

4. Sticky Footer Layout

Push the footer to the bottom of the viewport even when main content is short by applying flex: 1 to main area.

Header

Main Content (flex: 1)

Footer

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main { flex: 1; }

Open in Playground

5. Holy Grail Web Layout

Combine column and row flex containers to create header, left sidebar, main content, right sidebar, and footer sections.

Header

Sidebar

Main

Footer

.body {
  display: flex;
  flex: 1;
}
.content { flex: 1; }

Open in Playground

6. Media Object Layout

Align a fixed-size avatar/image side-by-side with fluid content for comments, reviews, or user profile components.

Img

User Name

Comment text content goes here...

.media-object {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

Open in Playground