1. Advantages of flex layout
-
Easy to operate, extremely simple layout, and a wide range of mobile applications
-
PC-side browser support is poor
-
IE11 or earlier, not supported or only partially supported
2. Flex layout principle
flex means "elastic layout", which is used to provide maximum flexibility for the box model, and any container can be specified as a flex layout
-
When our parent box is set to flex layout, the float, char and vertical-align properties of the child elements will be invalid
-
Flexible layout = flexible layout = flexible box layout = flexible box layout = flex layout
-
Elements that adopt flex layout are called flex containers, or "containers" for short. All its child elements automatically become container members, called Flex items, referred to as "items"
Summary: flex layout principle: control the position and arrangement of child boxes by adding flex attributes to the parent box
Common attributes of flex layout parents
3. The following 6 attributes are set on the parent element
-
flex-direction: Set the direction of the main axis
-
justify-content: Set the arrangement of child elements on the main axis
-
flex-wrap: Set whether the child element wraps
-
align-content: set the alignment of child elements on the cross axis (multiple lines)
-
align-items: set the alignment of child elements on the cross axis (single line)
-
flex-flow: Composite attribute, which is equivalent to setting flex-direction and flex-wrap at the same time
3.1 flex-direction
设置主轴的方向(that is, the arrangement direction of items) -
main shaft and side shaft
-
In the flex layout, it is divided into two directions: the main axis and the side axis. The same method is called: row and column, x axis and y axis
Default main axis: horizontal right, side axis, vertical down
-
attribute value
The main axis and the side axis will change, it depends on who is the main axis in the flex-direction setting, and the rest is the side axis. And our child elements are arranged along the main axis
| attribute value | illustrate |
|---|---|
| row | Default is left to right |
| row-reverse | right to left |
| column | top to bottom |
| column-reverse | bottom up |
3.2 justify-content sets the arrangement of sub-elements on the main axis
The justify-content property defines how items are aligned on the main axis
Note: Before using this property, be sure to determine which axis is
| Attributes | illustrate |
|---|---|
| flex-start | By default start from the head, if the main axis is the x-axis, then go from left to right |
| flex-end | Sort from the end |
| center | Align at the center of the main axis (horizontally centered if the main axis is the x-axis) |
| space-around | Divide the remaining space equally |
| space-between | Fit both sides first and then divide the remaining space equally (important) |
3.3 flex-wrap sets whether the child element wraps
By default, the items are arranged on a line ( that is, in the flex layout, the default child elements do not wrap. If they cannot be loaded, the width of the child elements will be reduced and placed in the parent element)
| attribute value | illustrate |
|---|---|
| nowrap | default, no newline |
| warp | new line |
flex-wrap:nowrap;
flex-wrap: wrap;
3.4 align-items Set the arrangement of sub-elements on the side axis ( single line )
This property is to control the arrangement of sub-items on the side axis (y-axis by default), and is used when the sub-item is a single item
| attribute value | illustrate |
|---|---|
| flex-start | Default, top to bottom |
| flex-end | bottom up |
| center | Center together (vertically center) |
| stretch | to stretch |
align-items: flex-start;
align-items: flex-end;
align-items: center;
If you want to center horizontally on both the main axis and the cross axis
justify-content:center ;
align-items: center;
align-items: stretch ; (after removing the height of the child element)
3.5 align-content Set the arrangement of child elements on the side axis ( multiple lines )
Sets the arrangement of sub-items on the side axis and can only be used when sub-items appear in newlines ( multiple lines, ie flex-wrap: wrap), it has no effect under single-line.
| attribute value | illustrate |
|---|---|
| flex-start | The default is to start aligning at the head of the cross axis |
| flex-end | Start alignment at the end of the cross axis |
| center | Show in the middle of the side axis |
| space-around | Children divide the remaining space equally on the cross axis |
| space-between | The child items are distributed at both ends on the side axis first, and then divide the remaining space equally |
| stretch | Set the height of the child element to equal the height of the parent element |
flex-wrap: wrap;
align-content: flex-start;
flex-wrap: wrap;
align-content: flex-end;
flex-wrap: wrap;
align-content: space-around;
flex-wrap: wrap;
align-content: space-between;
Note: The difference between align-content: space-around and space-content: between
3.6 The difference between align-content and align-items
-
align-items is suitable for single-line cases, only top alignment, bottom alignment, centering and stretching
-
align-content is suitable for newlines (multiple lines) (invalid for single lines), you can set attribute values such as top alignment, bottom alignment, centering, stretching, and evenly distributing the remaining space
-
The summary is to find align-items in a single line and find align-content in multiple lines
3.7 flex-flow
The flex-flow property is a composite property of the flex-direction and flex-warp properties
flex-flow: row wrap;4. Common attributes of flex layout subitems (designing subelements)
Original:
4.1 The flex attribute defines the sub-item to allocate the remaining space, and use flex to indicate how many copies it occupies
.item {
flex: <number>; /* default 0 */
} section div:nth-child(2) {
width: 100px;
height:150px;
background-color: rgb(0, 128, 13);
flex: 1;
section div {
flex: 1;
}
section div:nth-child(1) {
background-color: purple;
color: #fff;
flex: 2;
}
4.2 flex-self controls how children are arranged on the side axis
The align-self attribute allows a single item to have a different alignment from other items, and can override the align-items attribute. The default value is auto, which means inheriting the parent element align-items attribute. If there is no parent element, it is equivalent to stretch
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}4.3 The order attribute defines the order in which items are sorted
The default value of the item starts from 0, the smaller the value, the higher it can be ranked, and it can be set to a negative number.