flex layout
Traditional layout:
- Compatibility number
- Cumbersome layout
- Limitations, cannot be well laid out on mobile
flex layout:
- Simple operation and extremely simple layout
- PC browser support is poor
- IE11 or lower version does not support
how to choose:
1. If it is a PC-side page layout, choose a traditional layout
2. For mobile or PC web page layouts that do not consider compatibility issues, consider using flex layout
1. Principle of flex layout
1. Flex is the abbreviation of flexible Box, which means "flexible layout". It is used to provide maximum flexibility for the box model. Any container can be designated as a flex layout.
2. When we set the flex layout for the parent box, the float, clear and vertical-align of the child elements become invalid
3. Flexible layout = flexible layout = flexible box layout = flexible box layout = flex layout
4. The element that adopts flex layout is called flex container, or container for short. All of its child elements automatically become container members, called flex items, or "items" for short.
Summary: The principle of flex layout: is to control the position and arrangement of child boxes by adding flex attributes to the parent box
2、flex-direction
Determine the main axis direction (the arrangement direction of the items)
flex-direction: row //默认：从左到右
flex-direction: row-reverse; //从右到左
flex-direction: column-reverse;//从下到上
flex-direction: column;//从上到下
3、justify-content
Defines the alignment of items in the main axis direction
[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-HICQwLsa-1610072790973) (C:\Users\张艳杰\AppData\Roaming\Typora\typora-user-images\ 1609085073819.png)]
4、flex-wrap
Set whether the child element wraps
By default, items are arranged in a line (axis), defined by the flex-wrap property, and the flex layout does not wrap by default.
Property value:
nowrap: default value, no line break; wrap: line break
5、align-item
Control the child on the side axis (the default is the y axis)
Use when the child is a single line
[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-4ZrAGstn-1610072790976) (C:\Users\张艳杰\AppData\Roaming\Typora\typora-user-images\ 1609086284077.png)]
6、align-content
Set the arrangement of the sub-items on the cross axis, and it can only be used when the sub-items are line-wrapped (multi-line), and it has no effect under a single line.
[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-Tleb70Vj-1610072790978) (C:\Users\张艳杰\AppData\Roaming\Typora\typora-user-images\ 1609162514542.png)]
7. The difference between align-item and align-content
- align-items are suitable for single-line situations, only top alignment, bottom alignment, centering and stretching
- align-content is suitable for line breaks (multi-line). You can set top alignment, bottom alignment, centering, stretching, and even distribution of remaining space.
- Find align-items in one line, find align-content in multiple lines
8、flex-flow
The flex-flow attribute is a conforming attribute of the flex-direction and flex-wrap attributes
flex-flow:row nowrap;
9, flex sets the number of copies of the child
The flex attribute defines the remaining space of the parent box allocated by the child item, and uses flex to identify how many copies it takes.
The attribute is debriefing, the number is 1, the mark accounts for one part of the total score, and the default is 0.
div{
flex: 1;
}
10. The align-self and order attributes of the child item
The align-self attribute allows a single item to have a different alignment from other items. It can override the align-items attribute. The default is auto, which means that the align-items attribute of the parent element is inherited. If there is no parent element, it is equivalent to stretch.
div:nth-child(1){
align-self: flex-end;
}
The order attribute defines the order of the items, the smaller the value, the higher the order, the default is 0.