Flex layout

Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models. Webkit-kernel browsers must be prefixed with -webkit.

.box{ display: -webkit-flex; /* Safari */ display: flex; } Note that with Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.Copy the code

Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end. By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Container properties

Container properties

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

Flex-direction The flex-direction property determines the direction of the main axis (that is, the alignment of items)

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code
  • Row (default) : The main axis is horizontal and the starting point is on the left.
  • Row-reverse: The main axis is horizontal and the starting point is at the right end.
  • Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
  • Column-reverse: the main axis is vertical and the starting point is at the bottom.

Flex-wrap By default, projects are arranged on a single line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.


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

Flex-flow The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is row nowrap.

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

The context-content attribute defines the alignment of items on the main axis.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code
  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: both ends are aligned with equal intervals between items.
  • Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.

The align-items align-items property defines how items are aligned on the cross axis.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code
  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: alignment of ends of crossed axes.
  • Center: Alignment of the midpoint of the cross axis.
  • Baseline: The baseline alignment of the first line of text of the project.
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.

The align-content align-content property 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;
}
Copy the code
  • Flex-start: align with the starting point of the cross axis.
  • Flex-end: aligns with the end of the cross axis.
  • Center: aligns with the midpoint of the intersecting axis.
  • Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
  • Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
  • Stretch (default) : Axis takes up the entire cross axis.

Project attributes

Project attributes

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

The ORDER order property defines the order in which items are sorted. The smaller the value is, the more advanced it is. The default value is 0.

.item {
  order: <integer>;
}
Copy the code

Flex-grow The flex-grow property defines the zoom scale of the project. The default is 0, that is, no zoom if there is free space.

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

The flex-shrink attribute defines the shrink scale of the project, which defaults to 1, that is, if there is insufficient space, the project will shrink.

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

The flex-basis flex-basis property defines the main size of the project before the extra space is allocated. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

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

Flex Flex properties are short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional. This property has two shortcut values: auto (1 1 auto) and None (0 0 auto).

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

The align-self align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.

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