CSS Flexbox: a complete guide with examples

CSS Flexbox (Flexible Box Layout) is a layout module that lets you create flexible one-dimensional layouts. Flexbox solves many alignment and space-distribution problems without using floats or positioning. This article covers all Flexbox properties with practical examples.

Flexbox basics

Flexbox works along two axes: the main axis and the cross axis. The direction of the main axis is determined by the flex-direction property. Items are arranged along the main axis and aligned along the cross axis.

Creating a flex container

To enable Flexbox, simply set display: flex or display: inline-flex on the parent element:

.container {
  display: flex;
}

All direct children become flex items and have special default behavior: they are arranged in a row, shrink to their minimum size, and do not wrap.

Flex container properties

flex-direction

Defines the direction of the main axis and the order of the items:

.container {
  display: flex;
  flex-direction: row; /* элементы в ряд */
}

.container-column {
  display: flex;
  flex-direction: column; /* элементы в колонку */
}

flex-wrap

Controls whether items wrap when there is not enough space:

.container {
  display: flex;
  flex-wrap: wrap;
}

flex-flow

Shorthand for flex-direction and flex-wrap:

.container {
  flex-flow: row wrap;
}

justify-content

Aligns items along the main axis:

.container {
  display: flex;
  justify-content: space-between;
}

align-items

Aligns items along the cross axis (within a single line):

.container {
  display: flex;
  align-items: center;
}

align-content

Aligns flex container lines when flex-wrap: wrap. Ignored when there is only one line:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

Flex item properties

flex-grow

The item's growth factor when free space is available. The default is 0 (does not grow):

.item {
  flex-grow: 1; /* займёт всё свободное место */
}

.item-double {
  flex-grow: 2; /* займёт в два раза больше, чем элемент с flex-grow: 1 */
}

flex-shrink

The item's shrink factor when there is not enough space. The default is 1:

.item {
  flex-shrink: 0; /* не сжимается */
}

flex-basis

The item's initial size before space is distributed. Can be specified in px, %, em, or auto:

.item {
  flex-basis: 200px;
}

flex

Shorthand: flex-grow flex-shrink flex-basis. The default value is 0 1 auto:

.item {
  flex: 1 1 auto; /* растёт и сжимается, базовый размер auto */
}

.item-fixed {
  flex: 0 0 200px; /* фиксированная ширина 200px */
}

align-self

Overrides align-items for an individual item:

.item {
  align-self: flex-end;
}

order

The visual order of items. The default is 0. Negative values place an item earlier:

.item-first {
  order: -1;
}

.item-last {
  order: 1;
}

Practical examples

Equal-width cards in a row

.cards {
  display: flex;
  gap: 1rem;
}

.card {
  flex: 1 1 0;
  min-width: 0;
}

Navigation menu

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

Sidebar + content

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1 1 auto;
}

Horizontal and vertical centering

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Common mistakes

1. Forgetting min-width: 0 — flex items have min-width: auto by default, which prevents them from shrinking. Add min-width: 0 for text content.

2. Combining flex and width — with flex: 1 1 auto, an explicit width can cause conflicts. Use flex-basis instead of width.

3. gap and older browsers — the gap property is not supported for Flexbox in all browsers. For compatibility, use margin on the items.

Tools for experimentation

For quick testing and debugging of Flexbox layouts, try the Flexbox Playground on rechecker.ru—an interactive sandbox where you can change properties and see the result immediately.

Responsive behavior

Flexbox works well with media queries for creating responsive layouts:

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .item {
    flex: 1 1 calc(50% - 1rem);
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

Specifics of inline-flex

display: inline-flex creates a flex container that behaves like an inline element. It is useful when you need to embed a flex layout in text or limit the container's width to its contents:

.badge-group {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

Performance

Flexbox is processed efficiently by the browser. Key recommendations:

• Avoid deeply nested flex containers (more than 3-4 levels)
• Use will-change: flex only when animating flex properties, and only on the animated elements
• For static layouts, prefer flex: 0 0 auto over flex: 1 1 auto if growth is not needed

Browser support

Flexbox is supported in all modern browsers. IE10 and IE11 require -ms- prefixes:

.container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

Autoprefixer and PostCSS automatically add the necessary prefixes when building the project.

Comparison with CSS Grid

Flexbox is optimal for one-dimensional layouts (a row or a column). CSS Grid is better suited to two-dimensional grids. For a detailed comparison of the technologies and recommendations on which to choose, see Flexbox vs CSS Grid: when to use each.

Additional Flexbox centering patterns are described in CSS centering with Flexbox: all the methods.