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:

  • row (default): left to right (assuming the writing mode is left to right)
  • row-reverse: right to left (assuming the writing mode is left to right)
  • column: top to bottom
  • column-reverse: bottom to top

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;
}
  • row (default): flex container’s main axis is the same as the text direction (ltr, rtl, or auto).
  • row-reverse: flex container’s main axis the opposite of the text direction.
  • column: flex container’s main axis is the same as the block axis.
  • column-reverse: flex container’s main axis is the opposite of the block axis.

flex-wrap

Specifies whether flex items should wrap onto multiple lines.

flex-wrap
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (default): flex items will be forced onto one line (may cause the flex container to overflow).
  • wrap: flex items will break onto multiple lines, from top to bottom.
  • wrap-reverse: flex items break into multiple lines, from bottom to top.

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
  • flex-start (default): items are packed toward the start of the flex-direction.
  • flex-end: items are packed toward the end of the flex-direction.
  • start: items are packed toward the start of the writing-mode direction.
  • end: items are packed toward the end of the writing-mode direction.
  • center: items are centered along the main axis.
  • space-between: items are evenly distributed along the main axis. First item is on the main-start edge; last item is on the main-end edge.
  • space-around: items are evenly distributed along the main axis. The space between each pair of adjacent items is the same. The space before the first item and the space after the last item is half the space between each pair of adjacent items.
  • space-evenly: items are evenly distributed along the main axis. The space between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

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
  • flex-start / start / self-start: items are flushed to the start of cross-axis. The difference between these values is whether they respect the flex-direction or writing-mode rules.
  • stretch (default): stretch flex items to fill the contain (still respect width and height constraints).
  • flex-end / end / self-end: items are flushed to the end of cross-axis. The difference between these values is whether they respect the flex-direction or writing-mode rules.
  • center: items are centered along the cross-axis.
  • stretch: stretch flex items to fill the contain (still respect width and height constraints).
  • baseline: items are aligned so that their flex container baselines align.
.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 | ...
}
  • normal (default): items are packed in their default position as if no align-content value was set.
  • flex-start / start: items are packed to the start of the container. flex-start uses the flex-direction while start uses the writing-mode direction.
  • flex-end / end: items are packed to the end of the container. flex-end uses the flex-direction while end uses the writing-mode direction.
  • center: lines are centered along the cross axis.
  • space-between: the space between each adjacent line is the same. The first line is flushed to the start of the container while the last one flushed to the end.
  • space-around: the space between each pair of adjacent lines is the same. The space before the first line and the space after the last line is half the space between each pair of adjacent lines.
  • space-evenly: the space between each pair of adjacent lines, the main-start edge and the first line, and the main-end edge and the last line, are all exactly the same.
  • stretch: lines stretch to fill the remaining space.

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

  • Flexbox stands for “Flexible boxes”.
  • Spec first defined around 2008 / 2009.
  • Good for vertical centering and equal heights.
  • Easy to reorder boxes.
  • Wasn’t originally designed for layouts.
  • Well-supported in all modern browsers, except for IE (which is deprecated anyway).
  • By default, flex items are as wide as their content.

Sources

Tagged: CSS