An article takes you quickly to learn flex layout

know flex 

Traditional layout and flex Layout

Traditional layout

• Compatibility is good.

• Complicated layout

• limitations , Can not be well adapted to the mobile terminal

flex Layout

• It is easy to operate , The layout is extremely simple

• Mobile terminal is widely used

flex Elastic layout

flex For a flexible layout , Used to provide maximum flexibility for box models , Any container can be specified as flex Layout .

When we set the parent box to flex After the layout , The child element float、clear、vertical-align Properties will fail

Layout principle

use flex Elements of layout , Become flex Containers . All its children   Element automatically becomes a container member , be called flex project . By adding... To the parent box flex attribute , To control the position and arrangement of sub boxes

flex Parent common properties  

flex-direction

Set the direction of the spindle

row From left to right （ The default value is ）
row-reverse From right to left
column From top to bottom
column-reverse From bottom to top

justify-content

Defines the alignment of child elements on the spindle .

！！ Before use, make sure that the spindle

flex-start Start from scratch , If the spindle is x Axis , From left to right （ The default value is ）
flex-end Start with the tail
center Align center , If the spindle is x Axis , Then the level is in the middle
space-around Each sub element divides the remaining space equally
space-between Trim on both sides , Divide the rest of the space equally

flex-wrap

Set whether the child element should wrap . Default no line breaks , When a row cannot be placed, the length of the sub box on the spindle will be automatically reduced , Put all the child elements on one line .

nowrap Don't wrap （ The default value is ）
warp Line break
wrap-reverse Line break , From bottom to top

align-items

Set the arrangement of child elements on the side axis （ A single ）

flex-start Start from scratch , If the spindle is x Axis , From top to bottom
flex-end From bottom to top
center Align center , If the spindle is x Axis , Then it's vertically centered
stretch The tensile .！！ Child elements cannot be given height

align-content

Set the arrangement of child elements on the side axis （ Multiple lines ）. Use only when child elements wrap , There is no effect under a single line .

flex-start Start from scratch , If the spindle is x Axis , From top to bottom
flex-end From bottom to top
center Align center , If the spindle is x Axis , Then it's vertically centered
space-around The child elements divide the remaining space equally
space-between Trim on both sides , Divide the rest of the space equally

flex-flow

yes flex-direction and flex-wrap The composite properties of , Set the spindle direction and whether to wrap

Such as ：row wrap The spindle is x Axis and wrap

Last

Flex  Can make your web page more gorgeous  

Flex The properties are all here , Don't collect it yet