CSS Flexbox

Create flexible one-dimensional rows and columns, and align items along both axes.

Creating layouts is one of the most important parts of web design. Before Flexbox, arranging elements side by side or centering content often required complicated CSS techniques. Flexbox, short for Flexible Box Layout, was introduced to make layout design easier, cleaner, and more responsive.

Flexbox helps developers align, arrange, and distribute space between elements inside a container. It is widely used in modern websites because it simplifies many common layout tasks.

Understanding Flex Containers and Flex Items

Two Flexbox diagrams: the left labels the purple parent container, and the right labels its three orange flex items

Flexbox works with two main parts:

Flex Container
Flex Items

The parent element becomes the flex container, and its child elements become flex items.

Example

HTML

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS

.container {
  display: flex;
}

By setting display: flex, all child elements become flex items and are placed in a row by default.

Flex Container

Flex Direction

The flex-direction property controls the direction of flex items.

CSS

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

Flex Wrap

Six numbered items stay on one line with nowrap, flow into two rows with wrap, and reverse the row stacking with wrap-reverse.

The flex-wrap property controls whether flex items stay on one line or wrap onto multiple lines.

CSS

.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Justify Content

Three flex items are packed at the start, end, or center, or distributed with space-between, space-around, and space-evenly.

The justify-content property aligns items along the main axis.

Example

CSS

.container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Align Items

Flex items align at the cross-axis start, end, or center, stretch to fill the line, or align their text baselines.

The align-items property aligns items along the cross axis.

Example

CSS

.container {
  display: flex;
  align-items: stretch | flex-start | flex-end | center | baseline;
}

Align Content

Three wrapped rows align at the start, end, or center, distribute their vertical free space, or stretch to fill the container.

The align-content property distributes flex lines along the cross axis when wrapping is enabled and extra space is available.

CSS

.container {
  display: flex;
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

Gap

A wrapped flex layout has 10px between rows and 20px between columns.

The gap property sets the spacing between flex items and lines.

CSS

.container {
  display: flex;
  gap: 10px;
  gap: 10px 20px; /* row-gap column-gap */
  row-gap: 10px;
  column-gap: 20px;
}

Flex Items

Order

The order property controls the visual order of flex items. Items with lower values appear first.

CSS

.item {
  order: 5; /* default is 0 */
}

Flex Grow

With flex-basis zero, grow factors 1, 1, 1 give equal widths, while 1, 4, 1 gives the middle item four shares.

The flex-grow property controls how much of the available space a flex item receives relative to the other items.

CSS

.item {
  flex-grow: 4; /* default 0 */
}

Flex Basis

The flex-basis property sets the initial size of a flex item along the main axis before it grows or shrinks.

CSS

.item {
  flex-basis: <length> | auto; /* default auto */
}

Align Self

The align-self property overrides the align-items setting of the container for an individual flex item.

CSS

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}