What is Flex layout?

Flex is the abbreviation of Flexible Box, which means "flexible layout", and is used to provide maximum flexibility for box model.

Any container can be specified as a Flex layout.

.box{
  display: flex;
}

Inline elements can also use Flex layouts.

.box{
  display: inline-flex;
}

The browser of webkit kernel must be prefixed with - webkit.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

Note that the float, clear, and vertical align attributes of child elements will be invalidated when the Flex layout is set.

Basic concepts

Elements with Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, which are called Flex items, or "items" for short.

The container has two axes by default: the horizontal main axis and the vertical cross axis. The starting position of the spindle (the intersection with the border) is called main start, and the ending position is called main end; The start position of the cross axis is called cross start and the end position is called cross end.

Items are arranged along the main axis by default. The spindle space occupied by a single item is called main size, and the cross axis space occupied is called cross size.

Properties of the container

The following six properties are set on the container.

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Flex direction property

The flex direction attribute determines the direction of the spindle (that is, the arrangement direction of items).

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

It may have four values.

row(Default value): the main axis is horizontal and the starting point is at the left end.
row-reverse: The spindle is horizontal and the starting point is at the right end.
column: The main axis is vertical and the starting point is on the top edge.
column-reverse: The main axis is vertical and the starting point is at the lower edge.

Flex wrap attribute

By default, items are arranged on a single line, also known as a grid line. The flex wrap attribute defines how to wrap lines if an axis cannot be arranged.

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

It may take three values.
(1) nowrap (default): no line breaks.
(2) Wrap: wrap a line, with the first line above.
(3) Wrap reverse: wrap, first line below.

flex-flow

The flex flow attribute is a short form of the flex direction attribute and the flex wrap attribute. The default value is row nowrap.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

Justify content attribute

The justify content attribute defines the alignment of items on the spindle.

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

It may take five values, and the specific alignment is related to the direction of the axis. Let's assume that the spindle is from left to right.

flex-start(Default): align left
flex-end: Right align
center:  Center
space-between: Align both ends so that the spacing between items is equal.
space-around: The spacing on both sides of each item is equal. Therefore, the interval between items is twice as large as that between items and borders.

Align items property

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

It may take five values. The specific alignment is related to the direction of the cross axis. It is assumed that the cross axis is from top to bottom.

flex-start: Align the start point of the cross axis.
flex-end: Align the ends of the cross axes.
center: Align the midpoint of the cross axis.
baseline: Align the baseline of the first line of text of the item.
stretch(Default): if the project is not set to height or set to auto，Will occupy the height of the entire container.

Align content attribute

The align content attribute defines the alignment of multiple axes. This property has no effect if the project has only one axis.

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

This attribute may take 6 values.

flex-start: Align with the start point of the cross axis.
flex-end: Align with the end of the cross axis.
center: Align with the midpoint of the cross axis.
space-between: Align with both ends of the cross axis, and the spacing between the axes is evenly distributed.
space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as that between the axis and the frame.
stretch(Default): the axis occupies the entire cross axis.

Properties of the project

The following six properties are set on the project.

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order attribute

The order attribute defines the order in which items are arranged. The smaller the value, the higher the arrangement. The default value is 0.

.item {
  order: <integer>;
}

Flex growth attribute

The flex growth attribute defines the magnification of the item. The default is 0, that is, if there is any remaining space, it will not be enlarged.

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

If all items have a flex growth attribute of 1, they will equally divide the remaining space, if any. If the flex growth attribute of one item is 2 and all other items are 1, the remaining space occupied by the former will be twice that of other items.

Flex shrink attribute

The flex shrink attribute defines the reduction scale of the item, which is 1 by default, that is, if there is insufficient space, the item will be reduced.

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

If the flex shrink attribute of all items is 1, they will be scaled down equally when there is insufficient space. If the flex shrink attribute of one item is 0 and all other items are 1, the former will not shrink when there is insufficient space.

Negative values are not valid for this property.

Flex basis attribute

The flex basis attribute defines the main size occupied by the project before allocating extra space. Based on this attribute, the browser calculates whether the spindle has excess space. Its default value is auto, which is the original size of the project.

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

It can be set to the same value as the width or height attribute (such as 350px), and the project will occupy a fixed space.

flex attribute

Flex attribute is short for flex grow, flex shrink and flex basis. The default value is 0 1 auto. The last two properties are optional.

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

This attribute has two quick values: auto (1 1 auto) and none (0 0 auto).

It is recommended to use this attribute first rather than write three separate attributes separately, because the browser will calculate the relevant values.

Align self attribute

The align self attribute allows a single item to have a different alignment from other items, which can override the align items attribute. The default value is auto, which means to inherit the align items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

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