Flex layout grammar tutorial

Web page layout (layout) is a key application of CSS.

Tradition of layout The solution, based on the box model, relies on display attribute + position attribute + float attribute. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

In 2009, W3C proposed a new solution—Flex layout, which can implement various page layouts simply, completely, and responsively. Currently, it has been supported by all browsers, which means that this feature can now be used very safely.

Flex layout will Become the first choice for future layout. This article describes the syntax of Flex layout.

The following content mainly refers to the following two articles: A Complete Guide to Flexbox and A Visual Guide to CSS3 Flexbox Properties.

One, what is the Flex layout?

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

Any container can be designated as a Flex layout.

.box{ display< span class="pun">: flex; }

Inline elements can also use Flex layout.

.box{ display< span class="pun">: inline-flex; }

Webkit kernel browsers must be prefixed with -webkit.

.box{ display< span class="pun">: -webkit-flex; /* Safari */ display:  flex; }< /span>

Note that after setting the Flex layout, the float, clear and vertical-align attributes of the child elements will be invalid.

Second, basic concepts

The elements that use Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become members of the container, called Flex items (flex items), or “items” for short.

The container exists by default Two axes: the horizontal main axis (main axis) and the vertical cross axis (cross axis). The start position of the main axis (the intersection with the frame) is called main start, and the end position is called main end; the start position of the cross axis is called cross start, and the end position is called cross end.

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

3. Attributes of the container

The following 6 attributes are set on the container.

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

3.1 flex-direction attribute

flex-direction attribute determines the main axis Direction (that is, the direction in which the items are arranged).

.box { flex< span class="pun">-direction: row | row-reverse | column | column-reverse;  }< /span>

It may have 4 values.

• row (default value): The main axis is horizontal, and the starting point is at the left end.
• row-reverse: The main axis is in the horizontal direction, and the starting point is at the right end.
• column: The main axis is in the vertical direction, and the starting point is at the upper edge.
• column-reverse: The main axis is in the vertical direction, and the starting point is at the bottom edge.

3.2 flex-wrap attribute

By default, items are arranged on a line (also known as “axis line”). The flex-wrap attribute defines how to wrap if an axis line cannot fit.

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }< /span>

It may take three values.

(1) nowrap (default): do not wrap.

(2) wrap: wrap, the first line is at the top.

(3) wrap-reverse: wrap, the first line is below.

3.3 flex- flow

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

.box { flex< span class="pun">-flow: <flex-direction> <flex-wrap>; }  span>

3.4 justify-content attribute

The justify-content attribute defines the alignment of the item on the main axis.

.box { justify< span class="pun">-content: flex-start | flex-end | center | space- between | space-around; }< /span>

It may take 5 values, and the specific alignment is related to the direction of the axis. The following assumes that the main axis is from left to right.

• flex-start (default): left-aligned
• flex-end: right-aligned
• center: centered
• space-between: align at both ends, the space between items is equal.
• space-around: The space on both sides of each item is equal. Therefore, the interval between items is twice as large as the interval between items and the border.

3.5 align-items attribute

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

.box { align< span class="pun">-items: flex-start | flex-end | center | baseline | stretch; }< /span>

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

• flex-start: align the starting point of the cross axis.
• flex-end: align the end points of the cross axis.
• center: align the midpoint of the cross axis.
• baseline: The baseline alignment of the first line of the project.
• stretch (default): If the item has no height set or set to auto, it will occupy the height of the entire container.

3.6 align-content attribute

The align-content attribute defines the alignment of multiple axes. If the project has only one axis, this property has no effect.

.box { align< span class="pun">-content: flex-start | flex-end | center | space- between | space-around | stretch; }< /span>

This attribute may take 6 values.

• flex-start: align with the starting 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 space between the axes is evenly distributed.
• space-around: The space on both sides of each axis is equal. Therefore, the interval between the axis is twice as large as the interval between the axis and the frame.
• stretch (default): The axis occupies the entire cross axis.

Four. Project attributes

The following 6 attributes are set on the project.

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

4.1 order attribute

The order attribute defines the order of the items. The smaller the value, the higher the arrangement, and the default is 0.

.item { order< span class="pun">: ; }

4.2 flex-grow attribute

< The p>flex-grow attribute defines the zoom ratio of the item, the default is 0, that is, if there is remaining space, it will not zoom.

.item { flex< span class="pun">-grow: ; /* default 0 */ }< /pre> 
 
If all items are The flex-grow properties are all 1, and they will equally divide the remaining space (if any). If the flex-grow property of one item is 2 and the other items are all 1, the remaining space occupied by the former will be twice that of other items. 
 
4.3 flex-shrink attribute
 
The flex-shrink attribute defines the reduction ratio of the item, the default is 1, that is, if the space is insufficient, the item will shrink. 
 
.item { flex< span class="pun">-shrink: ; /* default 1 */ }< /pre> 
 
If all items are The flex-shrink attributes are all 1, and when the space is insufficient, all will be reduced proportionally. If the flex-shrink property of one item is 0 and all other items are 1, then the former will not shrink when the space is insufficient. 
 
Negative values ​​are invalid for this attribute. 
 
4.4 flex-basis attribute
 
The flex-basis attribute defines the main size of the project before the extra space is allocated. The browser calculates whether there is extra space in the main axis based on this attribute. Its default value is auto, which is the original size of the project. 
 
.item { flex< span class="pun">-basis:  | auto; /* default auto */ }< /pre> 
 It can be set to the same value as the width or height attribute (such as 350px), and the item will occupy a fixed space. 
 
4.5 flex attribute
 
The flex attribute is shorthand for flex-grow, flex-shrink and flex-basis, and the default value is 0 1 auto. The last two attributes are optional. 
 
.item { flex< span class="pun">: none | [ <'flex-grow'> << span class="str">'flex-shrink'>? || <'flex-basis'> ] }< /span>
This attribute has two shortcut values: auto (1 1 auto) and none (0 0 auto). 
It is recommended to use this attribute first, instead of writing three separate attributes, because the browser will calculate the relevant value. 
4.6 align-self attribute
The align-self attribute allows a single item to be aligned differently from other items, and can override the align-items attribute. The default value is auto, which means the align-items attribute of the parent element is inherited. If there is no parent element, it is equivalent to stretch. 
.item { align< span class="pun">-self: auto | flex-start | flex-end | center < span class="pun">| baseline | stretch; }< /span>

This attribute may take 6 values, except for auto, the others are exactly the same as the align-items attribute.