We have briefly introduced the Flex layout and some of its basic attributes in the last content. Today, on the basis of yesterday, let us have a deeper understanding!
1. Horizontal and vertical centering
justify-content: center Let the child box item be centered in the horizontal direction
align-items: center Center the child box item in the direction of the vertical cross axis
If you want to achieve horizontal and vertical centering, you must first know who is the benchmark, that is to say, in which to achieve vertical centering
This is to make the pink box horizontally centered in the red border box, so the red border box is used as a benchmark to set the attribute value.
When I want the box with the red border to also be centered horizontally and vertically on the page, the browser is now the benchmark, so we need to set the attribute value in the body.
☆ Remember to set the height for the body
2. align-content defines the alignment of multiple axes
This property has no effect if the item has only one axis.
| flex-start |
Align to start of cross axis |
| flex-end |
Align to End of Cross Axis |
| center |
Align to midpoint of cross axis |
| space-between |
Aligned with both ends of the cross axis, the interval between the axes is evenly distributed |
| space-around |
The intervals on both sides of each axis are equal, and the interval between the axes is twice as large as the interval between the axes and the frame |
| stretch |
The height of the child element is not set or the height is auto, and the axis occupies the entire cross axis |
① flex-start
②flex-end
③center
④ space-between
⑤space-around
⑥ stretch
☆The attributes we learned above are all set on the parent element, and the attributes to be learned below are all set on the child element item .
1. The attributes of the project element item
1. order sorting
order defines the sorting order of the items, the default value is 0, the smaller the value, the higher the sorting
When I want the third "box 3" to be arranged forward, then I add order: -1;
2. flex-grow
-
flex-growOnly makes sense when there is space left on the container's main axis - The value of this property, called the magnification factor
value describe 0 The default is 0, that is, if there is remaining space, do not zoom in
1
fill up the remaining space
① flex-grow：0
② flex-grow：1
3. flex-shrinik: shrink
| value | illustrate |
| 1 | The default is 1, which means compressed |
| 0 | Indicates that it is not compressed and keeps the set size |
① flex-shrinik:0
.item:nth-of-type(2){flex-shrinik:0} means that the second item will not be compressed and keep the set size
Only the second item keeps the original width of 400px, the first and third ones default to 1 and are shrunk
②If you set flex-shrink: 0 for each item, it will exceed the width of the parent element
4、align-self
- This property can override the container's
align-itemsto customize the alignment of an item
☆The setting is invalid under multiple axes
| value | illustrate |
| flex-start |
Align to Cross Axis Start Line |
| flex-end | Align to Cross Axis End Line |
| center |
Align to Cross Axis Middle Line: Center Align |
| stretch |
Stretch in the direction of the cross axis |
① flex-start
.item:nth-of-type(3）{align-self：flex-start}
②flex- end
.item:nth-of-type(3）{align-self：flex-end}
③center
.item:nth-of-type(3）{align-self：center}
④stretch
.item:nth-of-type(3）{align-self：stretch}
5、 flex-basis
flex-basis has a higher priority than width, and if set at the same time, the height of flex-basis will be displayed
If a line does not fit, the width will still be compressed, unless flex-shrink: 0 is set
6. Flex is a compound attribute, consisting of: flex-grow flex-shrink flex-basis
The default value is flex (0 1 auto), the last two attributes are optional,
It is recommended to use this attribute first instead of writing three separate attributes separately, because the browser will calculate the relevant value.