Flex flexible layout

What is? flex

felxbox Layout is used for elastic layout , Can be adapted rem Deal with the problem of size adaptation

advantage ：

Any container can be specified as flex Layout , More flexible

More in line with the characteristics of responsive layout

shortcoming ：

Browser compatibility is not high , Compatible only ie9 Above browser

0

flex-direction

effect ： The arrangement of child elements in the parent element box

attribute ：
row Is the default value , From left to right
row-reverse And row contrary , From right to left
column Display child elements vertically , Default from top down
column-reverse And column contrary , From bottom to top

flex-warp

effect : Whether the child element is wrapped in the parent element box

attribute ：
nowrap The default value is , No line breaks or column breaks
warp Line or column breaks
wrap-reverse Line break or column break , But in the opposite direction

flex-flow

effect ： Combine the characteristics of the above two attributes
Example ：flex-flow：row wrap（x Axis arrangement and line feed ）

justify–content

effect ： Evenly distribute the space occupied by child elements within the parent element

attribute ：
flex-start The default value is , From left to right , The first child element is next to the beginning of the line
flex-end Contrary to the above
center centered
space-between Evenly distributed on this line , There is no room on both sides
space-around Evenly distributed on this line , There is half of the space between the two sub elements

align-items

effect ： Set each flex Alignment of elements on the cross axis （ If the spindle is x Then the cross axis is y, If the spindle is y The opposite is true ）

attribute ：
flex-start At the beginning of the container
flex-end At the end of the container
center centered

align-content

effect ： Operate multi line elements as a whole

attribute ：
flex-start At the beginning of the container
flex-end At the end of the container
center Align center
space-between Leave space between , Close on both sides
space-around There is also a blank on both ends