CSS Flexbox Layout Summary
1.1 Overview
Flex is the abbreviation of Flexible Box, which means "flexible layout", which is used to provide maximum flexibility for the box model. Any container (inline/block) can be specified as a flex layout.
Note: After an element is set to flex layout, the float, clear and vertical-align properties of its child elements will be invalid.
1.2 Concept Introduction
Elements using Flex layout are called flex containers, or "containers" for short. All its child elements automatically become members of the container, called flex items (flex items), referred to as "items". As shown in the following figure: The
container in Figure 1 has two axes by default: the horizontal main axis (main axis) and the vertical cross axis (cross axis). The starting position of the main axis (the intersection with the border) is called main start, and the ending position is called main end; the starting position of the cross axis is called cross start, and the ending position is called cross end. As shown in the following figure: The
items in Figure 1 are arranged along the main axis by default. The main axis space occupied by a single item is called main size, and the cross axis space occupied by it is called cross size. As shown in the following figure: Figure 1
1.3 Attributes Introduction
1.3.1 Container Attributes
1. flex-direction attribute
Function :
Define the direction of the main axis (that is, the arrangement direction of the items).
Syntax:
flex-direction: row | row-reverse | column | column-reverse;
parameter introduction:
row: the default value, the main axis is the horizontal direction, and the starting point is at the left end.
row-reverse: The main axis is horizontal, and the starting point is at the right end.
column: The main axis is the vertical direction, and the starting point is on the upper edge.
column-reverse: The main axis is vertical, and the starting point is at the lower edge.
2. flex-wrap property
Function :
Define how to wrap when items cannot be arranged on one axis (by default, items are arranged on one axis).
Syntax:
flex-wrap: nowrap | wrap | wrap-reverse;
parameter introduction:
nowrap: default value, no line wrapping.
wrap: wrap, the first line is above.
wrap-reverse: wrap, the first line is below.
3. flex-flow property
Function : The
flex-flow property is a shorthand for the flex-direction property and the flex-wrap property. The default value is row nowrap.
Syntax:
flex-flow: <flex-direction> || <flex-wrap>;
Fourth, justify-content property
Function :
Defines the alignment of items on the main axis.
grammar:
justify-content: flex-start | flex-end | center | space-between | space-around;
parameter introduction - the main axis direction is from left to right:
flex-start: default value, left-aligned
flex-end: right-aligned
center : Centered
space-between: Both ends are aligned, and the spacing between items is equal.
space-around: equal spacing on both sides of each item. So, the spacing between items is twice as large as the spacing between items and the border.
Note: The alignment of items on the main axis is relative to the direction of the axis.
Example demonstration:
<div class="nav">
<div class="nav-item">导航1</div>
<div class="nav-item">导航2</div>
<div class="nav-item">导航3</div>
</div>
.are not{
display: flex;
width: 600px;
height: 120px;
border: 1px solid #000;
background-color: #89479b;
}
.nav .nav-item{
height: 40px;
line-height: 40px;
background-color: #e88024;
}
.nav .nav-item:nth-child(odd){
width: 120px;
}
.nav .nav-item:nth-child(even){
width: 60px;
margin: 0 15px;
}
Default value effect: Figure 2
.nav{justify-content:flex-end;} effect, as shown in the following figure: Figure 3
.nav{justify-content:center;} effect, as shown in the following figure: Figure 4
.nav{justify -content:space-between;} effect, as shown in the figure below: Figure 5. The effect of
.nav{justify-content:space-around;}, as shown in the figure below: Figure
65. align-items property
Function :
Define the item in the intersection Alignment on the axis.
Syntax:
align-items: flex-start | flex-end | center | baseline | stretch;
parameter introduction - the direction of the cross axis is from top to bottom:
flex-start: the starting point of the cross axis is aligned.
flex-end: The end point of the cross axis is aligned.
center: The midpoint of the cross axis is aligned.
baseline: The baseline alignment of the item's first line of text.
stretch (default): If the item has no height or is set to auto, it will fill the height of the entire container.
Note: The alignment of items is relative to the orientation of the cross axis.
Example demonstration:
.are not{
display: flex;
width: 600px;
height: 120px;
margin-top: 21px;
border: 1px solid #000;
background-color: #89479b;
}
.nav .nav-item{
background-color: #e88024;
}
.nav .nav-item:nth-child(1){
width: 120px;
padding-top: 24px;
box-sizing: border-box;
font-size: 12px;
}
.nav .nav-item:nth-child(2){
width: 70px;
margin: 0 15px;
font-size: 24px;
}
.nav .nav-item:nth-child(3){
width: 120px;
font-size: 36px;
}
The default effect when the height is not set, as shown in the following figure: Figure 7
The default effect when the height is set, as shown in the following figure: Figure 8
.nav .nav-item:nth-child(1){height: 60px;}
.nav The effect of .nav-item:nth-child(2){height: 40px;}
.nav .nav-item:nth-child(3){height: 80px;}
.nav{align-items: flex-end;} , as shown in the following figure: Figure 9.
The effect of .nav{align-items: center;}, as shown in the following figure: Figure 10. The effect of
.nav{align-items: baseline;}, as shown in the following figure: Figure 11
VI. align-content property
Role :
Define the alignment of multiple axes.
Note: This property has no effect if the item has only one axis.
Syntax:
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
parameter introduction:
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: Align with both ends of the cross axis, and the spacing between the axes is evenly distributed.
space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between the axes is twice as large as the spacing between the axes and the frame.
stretch (default): The axis occupies the entire cross axis.
Effect display:
As shown in the figure below: Figure 12
1.3.2 The difference between the properties align-items and align-content
: The
align-items property applies to all flex containers and is used to set the alignment of each item on the cross axis.
align-items and align-content have the same function, but the difference is that the former is used to center each single-line container instead of centering the entire container.
The align-content property only applies to multi-line flex containers, and aligns the flex lines inside the flex container when there is extra space on the side axis.
Example demonstration:
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
.flex,.flex-item{
border: 1px solid #0f0f0f;
}
.flex{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100px;
height: 60px;
}
.flex-item{
width: 30px;
height: 20px;
}
Effect display: Figure 13. The effect of
setting .flex{align-content: center;} is the same as above, so it is invalid for flex items with only one line.
Set the effect of .flex{/*align-content: center;*/align-items: center;}, as shown in the following figure: Figure 14
After setting .flex-item{width: 60px;}, the element whose class name is flex changes. into a multi-line container, the effect at this time is as shown in the following figure: Figure 15
Set the .flex{align-content: center;/*align-items: center; */} effect, as shown in the following figure: Figure 16
1.3.2 Project Attributes
1. Order attribute
Function :
Define the arrangement order of items. The smaller the value, the higher the ranking, the default is 0.
Syntax:
order: <integer>;
Second, the flex-grow property
Function :
Define the enlargement ratio of the item, the default is 0, that is, if there is remaining space, it will not be enlarged.
Syntax:
flex-grow: <number>;
Hint:
If all items have a flex-grow property of 1, they will divide the remaining space (if any) equally. If one item has a flex-grow property of 2 and the other items are all 1, the former will take up twice as much remaining space as the other items.
Third, the flex-shrink property
Function :
Defines the reduction ratio of the item, the default is 1, that is, if there is not enough space, the item will be reduced.
Note: Negative values are invalid for this property.
Syntax:
flex-shrink: <number>;
Hint:
If the flex-shrink property of all items is 1, when the space is insufficient, they will be proportionally reduced. If the flex-shrink property of one item is 0 and the other items are 1, the former will not shrink when there is insufficient space.
Fourth, the flex-basis property
Function :
Define the main axis space occupied by the item before allocating excess space. Based on this property, the browser calculates whether there is excess space on the main axis. The default value is auto, which is the original size of the item.
Syntax:
flex-basis: <length> | auto;
Hint:
This property can be set to the same value as the width or height property (such as 350px), and the item will occupy a fixed space.
5. flex property
Function :
flex property is shorthand for flex-grow, flex-shrink and flex-basis, the default value is 0 1 auto. The last two properties are optional.
Syntax:
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Hint:
This property has two shortcut values: auto (1 1 auto) and none (0 0 auto).
It is recommended to use this property in preference to writing three separate properties, because the browser will infer the relevant value.
6. The align-self attribute
Function :
The align-self attribute allows a single item to have a different alignment than other items, and can override the align-items attribute. The default value is auto, which means inheriting the align-items property of the parent element. If there is no parent element, it is equivalent to stretch.
Syntax:
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Parameter introduction:
This property may take 6 values, except auto, others are exactly the same as the align-items property.
1.4 Compatibility
IOS can use the latest flex layout; Android 4.4 and below can only be compatible with the old flexbox layout;
Android 4.4 and above can use the latest flex layout.
1.5 New/old version flexbox layout comparison
| New flex layout | old flexbox layout |
| display:-webkit-flex; | display:-webkit-flex-box; |
| -webkit-flex:1; | -webki-flex-box:1; |
| justify-content:center; | box-pack:center; |
| align-items:center; | box-align:center; |
1.6 Example application
1.6.1 Equal proportion division
<div class="nav"> <div class="nav-item">导航1</div> <div class="nav-item">导航2</div> <div class="nav-item">导航3</div> <div class="nav-item">导航4</div> </div>
.are not{
display: flex;
}
.nav-item{
flex: 1;
border: 1px solid #ddd;
text-align: center;
}
1.6.2 Hybrid partitioning
<div class="nav">
<div class="nav-left">导航1</div>
<div class="nav-item">导航1</div>
<div class="nav-item">导航2</div>
</div>
.are not{
display: flex;
}
.nav .nav-left{
flex: 0 0 200px; /*The effect is the same as setting width: 100px;*/
border: 1px solid #333;
text-align: center;
}
.nav .nav-item{
border: 1px solid #ddd;
text-align: center;
}
.nav .nav-item:nth-child(2){
flex: 1;
}
.nav .nav-item:nth-child(3){
flex: 2;
}
1.6.3 Implementation of horizontal and vertical centering of boxes with uncertain width and height relative to the parent
<!-- Using positioning to achieve --> <div class="box"> <div class="con">Center horizontally and vertically</div> </div> <!-- Using flex to achieve --> <div class="box_1"> <div class="con">Center horizontally and vertically</div> </div>
.box,.box_1{
height: 100px;
border: 1px solid #ddd;
}
.box{
position: relative;
}
.box .con{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.box_1{
display: flex;
justify-content: center;
align-items: center;
}