Traditional layout
- Good compatibility
- Cumbersome layout
- Limitations, cannot be well laid out on the mobile terminal
- Generally used for web page layout
flex flexible layout
- The operation is convenient, the layout is extremely simple, and the mobile terminal is widely used.
- Poor support on PC
- IE11 or lower, does not support or only partially supports.
- When we set the flex layout for the parent box, the float, clear and vertical-align attributes of the child element become invalid
Common properties of flex layout
The following 6 attributes are set on the parent element
- flex-direction set the main axis direction
- justify-content sets the arrangement of sub-elements on the main axis
- flex-wrap sets whether the child element wraps
- align-content sets the sub-element percolation method on the cross axis (multi-line)
- align-items set the arrangement of sub-elements on the cross axis (single line)
- flex-flow composite attribute, equivalent to setting flex-derection and flex-wrap at the same time
The following are the settings for the child elements
- The number of copies occupied by flex sub-items
- align-self controls the arrangement of the children themselves on the cross axis
- The order attribute defines the order of the children (front-to-back order)