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 .