UCSSR
CSS Reference

CSS Flexbox Layout

Complete guide to CSS Flexbox — container properties, item properties, alignment, wrapping, and common layout patterns.

On this page

Overview

Flexbox (Flexible Box Layout Module) is a CSS layout model designed for distributing space and aligning items in a container. Set display: flex on a container to create a flex formatting context. Children become flex items that can grow, shrink, and be aligned along the main and cross axes. Flexbox replaces many float and positioning hacks with a clean, predictable API and is the foundation of component-level layout in modern CSS.

Syntax

display: flex | inline-flex

Values & Keywords

flex-direction
row (default), row-reverse, column, column-reverse. Sets the main axis direction.
justify-content
Aligns items along main axis: flex-start, center, flex-end, space-between, space-around, space-evenly.
align-items
Aligns items along cross axis: stretch (default), flex-start, center, flex-end, baseline.
flex-wrap
nowrap (default), wrap, wrap-reverse. Controls whether items wrap to new lines.
gap
Sets spacing between items. gap: 16px or row-gap: 16px; column-gap: 8px.
flex (item)
Shorthand for flex-grow, flex-shrink, flex-basis. flex: 1 makes items share space equally.
align-self (item)
Overrides align-items for a single item.

Practical Examples

Perfect centering
The most common flexbox use case: centering content both horizontally and vertically in a container. Just three declarations.
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
Header
Content (flex: 1)
Footer
Sticky footer layout
Make the footer stick to the bottom of the viewport even when content is short. The main content area grows to fill available space.
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page header { /* auto height */ }
.page main   { flex: 1; }
.page footer { /* auto height */ }
Responsive card grid with wrap
Using flex-wrap with a minimum width creates a responsive grid without media queries. Cards wrap to new rows when the container is too narrow.
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 300px;
  /* Grows to fill, shrinks if needed,
     but never narrower than 300px */
}
Navbar with spacer
Use margin-left: auto (or flex: 1 on a spacer) to push nav items to opposite sides of the container — logo on the left, actions on the right.
.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}

.navbar .logo { /* auto */ }
.navbar .spacer { flex: 1; }
.navbar .actions {
  display: flex;
  gap: 8px;
}

Try it visually

Use our interactive display: flex generator to experiment with values and see the result in real-time. Copy production-ready CSS, cross-browser CSS, or Tailwind classes with one click.

Open CSS Flexbox Layout Tool

Common Patterns

Equal-height cards
Flex items in a row automatically stretch to equal height. Combine with flex-direction: column on the card to push the action button to the bottom.
.card-row {
  display: flex;
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card .content { flex: 1; }
.card .action { margin-top: auto; }
Sidebar + content layout
A fixed-width sidebar with a flexible content area. The sidebar maintains its width while content fills the remaining space.
.layout {
  display: flex;
  gap: 24px;
}

.sidebar {
  flex: 0 0 280px;
  /* Don't grow, don't shrink, 280px wide */
}

.content {
  flex: 1;
  min-width: 0;
  /* Prevents text overflow */
}
Inline form with button
An input field that fills available space next to a fixed-width button. Common for search bars and newsletter signups.
.search-bar {
  display: flex;
  gap: 8px;
}

.search-bar input {
  flex: 1;
  min-width: 0;
}

.search-bar button {
  flex-shrink: 0;
}

Tips & Best Practices

  1. 1

    Use gap instead of margin for spacing between flex items — it only applies between items, not at the edges, and works consistently with wrap.

  2. 2

    Add min-width: 0 to flex items that contain text to prevent overflow. By default, flex items have min-width: auto which can cause text to push the container wider.

  3. 3

    flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Items start from zero width and grow equally. Use flex: auto (basis: auto) to grow from content size.

  4. 4

    flex-wrap: wrap with gap creates a simple responsive grid without media queries — set a min-width on items with flex: 1 1 <min-width>.

  5. 5

    Use order sparingly — it changes visual order but not tab order or screen reader order. Overusing it creates accessibility issues where visual and focus order diverge.

Browser Support

Supported in all modern browsers. No vendor prefix needed. gap in flexbox: Chrome 84+, Firefox 63+, Safari 14.1+.

Related CSS Guides

button CSS

CSS Button Styles

Complete guide to styling CSS buttons — backgrounds, borders, hover effects, transitions, focus states, and accessibility.

CSS Flexbox Layout — FAQ

Common questions about display: flex and how to use it effectively.

When should I use flexbox vs grid?

Flexbox: one-dimensional layout (row OR column). Grid: two-dimensional layout (rows AND columns simultaneously). Use flexbox for component-level layout (navbars, cards, form rows). Use grid for page-level structure and when you need items aligned in both directions.

How do I center something with flexbox?

On the container: display: flex; justify-content: center; align-items: center. This centers children both horizontally and vertically. For a single item, you can also use margin: auto on the child.

What does flex: 1 mean?

It is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. The item will start from 0 width and grow to fill available space, sharing equally with other flex: 1 siblings.

Why is my flex item overflowing its container?

Flex items have min-width: auto by default, which means they cannot shrink below their content size. Add min-width: 0 to the item to allow it to shrink, and use overflow: hidden or text-overflow: ellipsis on the text.

How do I make a flex item not shrink?

Set flex-shrink: 0 on the item, or use the shorthand flex: 0 0 auto. This tells the item to maintain its natural size regardless of available space.