Flex Layout Concepts

Flex is actually very simple to use. Flex is officially recommended for adaptive layouts on applets, WebApps, and hybrid apps.

An element with a Flex layout is called a Flex container. All of its child elements automatically become container members, called Flex item items. There are two axes in the container by default, main axis and cross axis. 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.

The main and cross axes cannot be simply understood as horizontal and vertical axes, because their positions can be replaced. Similarly, if the horizontal direction is the main axis, then main size is wide; If the vertical direction is the main axis, then main size is the height

Any container can specify the Flex layout

Flex Online Preview

.box{    
    display: flex; /* Inline elements: display: inline-flex; * /   
    display: -webkit-flex; /* Safari webkit-kernel browsers must be prefixed with -webkit. * /  
} 
Copy the code

Note here: After setting the Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

The six properties of the container

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

Flex-direction Preview online

.container {   
   flex-direction: row | row-reverse | column | column-reverse;  
} 
Copy the code
options performance
Row (default)

The spindle isThe level ofThe direction, the starting point isOn the left side of the
row-reverse

The spindle isThe level ofThe direction, the starting point isOn the right side
column

The spindle isverticalThe direction, the starting point isabove
column-reverse

The spindle isverticalThe direction, the starting point isbelow

Flex-wrap determines whether items in the container can be wrapped

Flex-wrap Preview online

.container {  
 flex-wrap: nowrap | wrap | wrap-reverse;
}  
Copy the code
options performance
Nowrap (default) does not wrap lines
wrap

Total project sizeMore thanThe spindle sizeThe first line is inabove
wrap-reverse

Newline, the first line is inbelow

Flex-flow: collection of flex-direction and flex-wrap

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

The default value is flex-direction:row; flex-wrap:nowrap; .

Context-content: Specifies the alignment of items along the main axis

Flex-wrap Preview online

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

When the main axis is horizontal, the performance is as follows:

options performance
The flex – start (the default)

The spindle directionThe starting pointalignment
flex-end

The spindle directionAt the end ofalignment
center

The spindle directionIn the middlealignment
space-between

Align left and right first, itemsSplit betweenThe remaining distance
space-around

On both sides of the projectInterval is equal to, the item interval isProjects and EdgesThe interval of theTwo times

Align-items: Specifies the alignment of items on the cross axis

Align -items online preview

When the main axis is horizontal, the performance is as follows:

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

When the main axis is horizontal, the performance is as follows:

options performance
Stretch (default)

If the item is not set to height or is set to Auto, it will fill the entire container height
flex-start

Cross axis directionThe starting pointalignment
flex-end

Cross axis directionThe starting pointalignment
center

Cross axis directionIn the middlealignment
baseline

The first item textBaseline alignment(Bottom of text)

Align-content: Specifies the alignment of multiple axes

Align -items online preview

This property will not work if the project has only one axis flex-wrap: nowrap

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

Flex-direction: row, flex-wrap: wrap

options performance
Stretch (default) :

If the item is not set to height or is set to Auto, it will fill the entire container height,Axis to splitOf the containerverticalOn the direction ofspace
Flex-start: axis in cross axis directionThe starting pointalignment
Flex-end: axis in cross axis directionAt the end ofalignment
Center: axis in cross axis directionIn the middlealignment
Space-between: align both ends of the axis,Split betweenVertical space
Space-around: both sides of the axisInterval is equal to, the axis spacing isAxis and edgeThe interval of theTwo times

Project attributes

Order: Defines the order of items in the containerThe smaller the value is, the higher the order is. The default value is 0

Order online preview

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

Flex-grow specifies the project enlargement scaleThe default value is 0, that is, if there is free space, it is not enlarged

Flex-grow online preview

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

If there is free space, the performance is as follows:

options performance
All projects have a flex-grow attribute of 1, and the project willDivide theThe remaining space
If one project has a flex-Grow attribute of 4 and all the other projects have a flex-Grow attribute of 1, the former will take up four times more space than the others

Flex-shrink specifies the size of the project to shrinkThe default is 1, which means that the project shrinks if there is insufficient space

Flex-shrink online preview

.item {
  flex-shrink: <number>; /* default 1 Negative values have no effect on this property */
}
Copy the code

. If.

When there is insufficient space, the performance is as follows:

options performance
The Flex-shrink attribute is 1 for all projects, and the shrink attribute is set to 1Equal scale reduction
One project has a Flex-shrink attribute of 0 and the other projects have a flex-shrink attribute of 1. The former does not shrink

Flex-basis: Specifies the main axis space to be occupied by the project before allocating extra spaceFrom this property, the browser calculates whether the main axis has extra space. The default value is Auto, which is the original size of the project

Flex-basis online preview

.item {
    flex-basis: <length> | auto; /* default auto */
}
Copy the code
  • The spindle isThe horizontal direction, the flex-basis value willletThe projectwidthfailure
  • Flex-basis needs to be used in conjunction with flex-grow and Flex-shrink, but only one flex-grow and flex-shrink work (You can't zoom in and out)
  • It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.

When there is spare space, the project whose flex-basis is not auto will be allocated first, and then the remaining space will be allocated to project 3flex-basis: 200px. , other flex-basis: auto;

Align-self: Specifies the alignment of items that is different from other items

Align-self online preview

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

Property defined by a single item, inheriting the align-items property of the parent element, or equivalent to stretch if there is no parent element. For example, if item 1 is align-items:flex-end, all other items are align-items:flex-start