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

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


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.


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

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


Specifies whether flex items should wrap onto multiple lines.

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


Shorthand for flex-direction and flex-wrap.

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

Initial value is row nowrap.


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



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).

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


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.

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


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


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 */


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 */


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 */


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 */


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;


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