sajad torkamani

Credit: Thanks to this CSS Tricks article for the illustrations.

What is Flexbox?

Flexbox is a one-dimensional layout model for CSS that lets you control the alignment of items along a single dimension (horizontal or vertical) as well the distribution of space between them.

Key terms

TermDescription
Flex containerParent HTML element that has display: flex.
Flex childAny elements that are nested inside a flex container.
Main axisThe direction of a flex container (set by flex-direction: row | row-reverse | column | column-reverse).
Cross axisThe alternate direction to the main axis. If main axis is column, cross axis is row; if main axis is row, cross axis is column.

Main axis vs cross-axis

The behavior of the flexbox model is heavily dependent on the values of the main and cross axis.

Main axis

The main axis is set by the flex-direction property and can be one of four values:

Cross axis

The cross-axis runs perpendicular to the main axis. So, if the main axis is row, the cross-axis is column; if the main axis is column, the cross-axis is row; if the main axis is row-reverse, the cross-axis is column-reverse, and so on.

Flex container set to row
Flex container set to column

Flex container properties

display

Used to define an element as a flex container, establishing a flex context for all its children.

.container {
  display: flex | inline-flex;
}

Initial value: block or span depending on the HTML element.

flex-direction

Sets the main axis, thus establishing the direction that flex items are placed in the container (horizontal or vertical).

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

flex-wrap

Specifies whether flex items should wrap onto multiple lines.

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

flex-flow

Shorthand for flex-direction and flex-wrap.

.container {
  flex-flow: <flex-direction> <flex-wrap>
}

Initial value is row nowrap.

justify-content

Controls how items should be distributed along the main axis, including the distribution of space between and around them.

justify-content

align-items

Controls the alignment of flex items on the cross-axis (equivalent to setting the align-self value on all direct children of the flex container).

align-items
.container {
  align-items: flex-start | stretch | flex-end | ...
}

align-content

Controls the alignment of the flex container’s lines on the cross axis when there are multiple lines. Only takes effect for multi-line flex containers where flex-wrap is set to wrap or wrap-reverse.

align-content
.container {
  align-content: flex-start | flex-end | center | ...
}

gap

Sets a minimum gutter between flex items.

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

Values can be specified as a length (px, rem, em) or as a percentage.

Flex item properties

order

Controls the order in which a flex item should appear within a flex container. By default, flex items appear in the order they’re defined in the HTML.

order CSS property
.item {
  order: 3; /* default is 0 */
}

flex-grow

Controls how much of any remaining space of the flex container an item should take up. Value is specified as a proportion.

For example, if there are three flex items with flex-grow: 1 and there is 300px of free space within the flex container, then each item will take up 100px (300px / 3) of the free space.

If there are two items with flex-grow: 1 and one item with flex-grow: 2, 25% of the space will be assigned to the two items with flex-grow: 1 and 50% to the item with flex-grow: 2 (see illustration below).

Default value is 0 which means flex items won’t grow to take up any remaining space within the flex container.

flex-grow CSS property
.item {
  flex-grow: 3; /* default 0 */
}

flex-shrink

Specifies how a flex item should shrink if necessary (when the size of all the flex items is larger than the flex container) in proportion to sibling items. The value is a proportion so the higher the value, the more the item will shrink in proportion to sibling items. The default value is 1 which means all flex items will shrink equally.

.item {
  flex-shrink: 2; /* default 1 */
}

flex-basis

Sets the initial size of the flex item.

Value can be a length (px, rem, em), a percentage of the parent flex container, or auto (equivalent to the width if flex-direction is row or height if flex-direction is column).

If flex-basis is set to anything other than auto, and the item has a width or height specified, flex-basis takes priority.

.item {
  flex-basis: auto; /* default auto */
}

flex

Shorthand for flex-grow, flex-shrink, and flex-basis.

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* One value, unitless number: flex-grow
flex-basis is then equal to 0. */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

align-self

Defines the alignment for the individual flex item along the cross-axis. This overrides the default alignment or the one set by the parent flex container via align-items.

align-self CSS rule
.item {
  align-self: flex-start | flex-end | center | ...
}

Other notes

Sources