flex Layout experience
Traditional layout and Flex Layout
Traditional layout
- Compatibility is good.
- Complicated layout
- limitations , You can't move the end any more. Good layout
Flex Layout
- It is easy to operate , The layout is extremely simple , Mobile applications are very wide
- PC The end browser support is poor
- IE 11 Or earlier , Not supported or only partially supported
Suggest
1. If it is PC End page layout , We still have the traditional layout .
2. If it is a mobile terminal or does not consider the compatibility problem PC End page layout , We still use flex Elastic layout
flex Layout principle
flex yes flexible Box Abbreviation , Meaning for " Elastic layout ", To provide maximum flexibility for box models
Any container can be specified as flex Layout .
- When we set... For the parent box flex After attribute , The child element float、clear and vertical-align Property will fail
- summary ：flex The principle summary of layout is ： By adding... To the parent box flex attribute , To control the position and arrangement of sub boxes .
flex Layout parent common properties
（1） Main shaft and side shaft
stay flex Layout , It is divided into two directions: the main axis and the side axis , The same name has rows and columns 、x Axis and y Axis
* The default spindle direction is x Axis direction , Horizontal right
* The default direction of the side axis is y Axis direction , Vertically down
（2）flex-direction Set the direction of the spindle （ That is, the arrangement of items ）
Be careful ： The main shaft and the side shaft change , Just look flex-direction Set sleep as spindle , The rest is the side shaft .
And our child elements are arranged according to the principal axis .| Property value | explain |
|---|---|
| row | The default is left to right （ The main axis is x Axis ） |
| row-reverse | From right to left （ The main axis is x Axis ） |
| column | From top to bottom （ The main axis is y Axis ） |
| row-reverse | From bottom to top （ The main axis is y Axis ） |
（3） justify-content Set the arrangement of sub elements on the spindle
justify-content Property defines how items are arranged on the spindle
Be careful ： Set up justify-content Before attributes , Be sure to determine which spindle is first
| Property value | explain |
|---|---|
| flex-start | The main axis is x Axis The arrangement is from left to right The spindle is y Axis The arrangement is from top to bottom |
| flex-end | The main axis is x Axis The arrangement is from right to left The spindle is y Axis The arrangement is from bottom to top |
| center | Align in the center of the spindle （ The spindle is x Axis Horizontal center The spindle is y Axis Vertical center ） |
| space-around | Divide the remaining space equally |
| space-between | We'll stick the edges on both sides first Divide the rest of the space equally （ important ） |
（4） flex-wrap Set whether the child element should wrap
By default , The child elements are all arranged on the same line （ namely x Axis or y axis ）.
But sometimes there are too many child elements , We want the child elements to wrap , You need to set flex-wrap The attribute is
| Property value | explain |
|---|---|
| nowrap | The default value is Don't wrap |
| wrap | Line break |
（5）align-items Set the arrangement of child elements on the side axis （ A single ） | Property value | explain |
|---|---|
| flex-start | The default value is From top to bottom |
| flex-end | From bottom to top |
| center | Huddled together in the middle （ Vertical center ） |
| stretch | The tensile |
（6）align-content Set the arrangement of the child elements on the side axis （ Multiple lines ）
Be careful ：align-content Property can only be used when a child item breaks a line , There is no effect in the case of a single line
| Property value | explain |
|---|---|
| flex-start | The default value is arranged at the head of the side axis |
| flex-end | Start at the end of the side axis |
| center | Show... In the middle of the side axis |
| space-around | Children divide the remaining space equally on the side axis |
| space-between | The subitems are first distributed at both ends on the side axis , Divide the rest of the space equally |
| stretch | Sets the height of the child element and bisects the height of the parent element |
（7）align-content and align-items difference
* align-items It is suitable for single line , Only top alignment 、 Lower alignment 、 Center and The tensile
* align-content Adapt to line breaks （ Multiple lines ） Under the circumstances （ Invalid in single line case ）,
You can set Top alignment 、 Next pair Qi 、 In the middle 、 Stretch and evenly allocate the remaining space .
* To sum up is to look for align-items Find more lines align-content
（8）flex-flow
flex-flow The attribute is flex-direction and flex-wrap Composite properties of properties
flex-flow:row wrap;
flex Common properties of layout subitems
（1）flex Number of copies of sub items
flex Property defines the remaining space allocated by the subproject , use flex To show how many copies ..item {
flex: <number>; /* default 0 */
}（2）align-self The way the items are arranged on their own side
align-self Property allows a single item to have a different alignment than other items , covering align-items attribute .
The default value is auto, Represents the... That inherits the parent element align-items attribute , If there is no parent element , Is equivalent to stretch. span:nth-child(2) {
/* Set your own arrangement on the side axis */
align-self: flex-end;
}（3）order Property defines the order in which children are arranged （ The order before and after ）
The smaller the numerical , The further up the line , The default is 0.
Be careful ： and z-index Dissimilarity ..item {
order: <number>;
}flex The layout is vertically and horizontally centered （ A single ）
The actual project address of this paper ：
https://github.com/dabaoRain/...
This document and actual project are from https://www.bilibili.com/vide... Learn in this video , Here as a note , Share with you , I hope that's helpful .
