Flex layout (reference to instructor Ruan Yifeng's Flex Layout-grammar)

I. What is the flex layout?

Flex, short for flexible box, is used to provide maximum flexibility for the box model.

Any container can be specified as a flex layout.

.box{  display: flex;}

You can also use the flex layout for In-row elements.

.box{  display: inline-flex;}

The WebKit kernel browser must be added-webkitPrefix.

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

Note: After the layout is set to flexfloat,clearAndvertical-alignThe property is invalid.

Ii. Basic Concepts

Elements in a flex layout are called Flex containers ". All its child elements automatically become container members, called Flex items ".

By default, the container has two axes: the horizontal axis and the vertical cross axis ). The starting position of the spindle (intersection with the border) is calledmain startThe end location ismain endThe starting position of the cross axis iscross startThe end location iscross end.

Projects are arranged along the main axis by default. The main axis space occupied by a single project is calledmain sizeThe cross-axis space occupied is calledcross size.

Iii. Container attributes

The following six attributes are set on the container.

• Flex-direction
• Flex-wrap
• Flex-Flow
• Justify-content
• Align-items
• Align-content

3.1 flex-direction attributes

flex-directionAttributes determine the direction of the spindle (that is, the direction of the project ).

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

It may have four values.

• row(Default): the spindle is in the horizontal direction and the start point is at the left end.
• row-reverse: The spindle is in the horizontal direction and the start point is in the right end.
• column: The spindle is in the vertical direction, and the starting point is in the upper direction.
• column-reverse: The spindle is in the vertical direction, and the start point is in the bottom.

3.2 flex-wrap attributes

By default, projects are arranged on a line (also known as "axis.flex-wrapAttribute definition. If an axis does not fit, how can we wrap it.

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

It may take three values.

(1)nowrap(Default): no line breaks.

(2)wrap: Line feed. The first line is above.

(3)wrap-reverse: Line feed. The first line is below.

3.3 flex-Flow

flex-flowAttribute isflex-directionAttributes andflex-wrapThe abbreviation of an attribute. The default value isrow nowrap.

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

3.4 justify-Content Attributes

justify-contentAttribute defines the alignment of the project on the main axis.

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

It may take 5 values. The specific alignment is related to the direction of the axis. Assume that the spindle is left to right.

• flex-start(Default): Left alignment
• flex-end: Right-aligned
• center: Center
• space-between: The two ends are aligned, and the interval between projects is equal.
• space-around: The two sides of each project are separated equally. Therefore, the interval between projects is twice the interval between projects and borders.

3.5 align-items attributes

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

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

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

• flex-start: The starting point of the cross axis.
• flex-end: The end point of the cross axis is aligned.
• center: The midpoint of the cross axis.
• baseline: Baseline alignment of the first line of text of the project.
• stretch(Default): If the height is not set for the project or set to Auto, the height of the entire container is fully occupied.

3.6 align-Content Attributes

align-contentAttribute defines the alignment of Multiple Axes. This attribute does not work if the project has only one axis.

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

This attribute may have 6 values.

• flex-start: Align with the starting point of the cross axis.
• flex-end: Align with the end point of the cross axis.
• center: Align with the midpoint of the cross axis.
• space-between: Alignment with the two ends of the cross axis. The interval between the two ends of the cross axis is evenly distributed.
• space-around: The intervals on both sides of each axis are equal. Therefore, the interval between axes is twice the interval between axes and borders.
• stretch(Default): The axis occupies the entire cross axis.

Iv. Project attributes

The following six attributes are set on the project.

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

4.1 order attributes

orderProperties define the order of projects. The smaller the value, the higher the order is. The default value is 0.

.item {  order: <integer>;}

4.2 flex-grow attributes

flex-growProperty defines the scale-in ratio of a project. The default value is0That is, if there is any remaining space, do not zoom in.

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

Ifflex-growIf all attributes are 1, they are equal to the remaining space (if any ). Ifflex-growIf the attribute is 2 and the other items are 1, the remaining space occupied by the former is twice that occupied by the other items.

4.3 flex-shrink attributes

flex-shrinkThe attribute defines the project scale-down ratio. The default value is 1. That is, if the space is insufficient, the project scale-down.

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

Ifflex-shrinkThe attribute value is 1. When there is not enough space, the equal proportion is reduced. Ifflex-shrinkIf the attribute is 0 and the other items are 1, the former will not be reduced when the space is insufficient.

The negative value is invalid for this attribute.

4.4 flex-basis attributes

flex-basisThe property defines the main size occupied by the project before the redundant space is allocated ). Based on this attribute, the browser calculates whether the spindle has extra space. Its default value isautoThat is, the original size of the project.

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

It can be setwidthOrheightIf the property is the same (for example, 350px), the project occupies a fixed space.

4.5 flex attributes

flexAttribute isflex-grow,flex-shrinkAndflex-basisThe default value is0 1 auto. The last two attributes are optional.

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

This attribute has two shortcut values:auto(1 1 auto) And none (0 0 auto).

We recommend that you use this attribute first, instead of writing three separate attributes, because the browser calculates the relevant values.

4.6 align-self attributes

align-selfAttribute allows a single project to have an alignment that is different from other projects and can be overwritten.align-itemsAttribute. The default value isautoThat inheritsalign-itemsAttribute. If no parent element exists, it is equivalentstretch.

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

This attribute may have six values, except auto, which are identical to the align-items attribute.

Flex layout (reference to instructor Ruan Yifeng's Flex Layout-grammar)