Flexbox is a collection of CSS properties for adjusting page layout based on different screen sizes.

1. Flex Container

Display

.container {
  display: flex; /* or inline-flex */
}

Element Direction

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

Wrap

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
  /*wrap onto multiple lines, from top to bottom. wrap-reverse: bottom to top.*/
}

Space Distribution

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

Align Items

This defines the default behaviour for how flex items are laid out along the cross axis on the current line.

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

Align Content

This aligns a flex container’s lines within when there is extra space in the cross-axis

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

2. Flex Item

Item Order

.item {
  order: <integer>;
}

Item Size Occupation

.item {
  flex-grow: <number>; /* default 0 */
}

Shrink

.item {
  flex-shrink: <number>; /* default 1 */
}

Flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

It is recommended that you use this shorthand property rather than set the individual properties.

Align Self

Override the default flex alignment for individual flex items.

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