Elastic box flex

Elastic box

Flex Layout , It's easy 、 complete 、 Responsive implementation of various page layouts ;

.box{
display:flex;
}

 Webkit Browser for kernel , Have to add -webkit Prefix ;

Set to Flex After the layout , The child element float、clear and vertical-align Property will fail .

Flex Elements of layout , be called Flex Containers （flex container）, abbreviation " Containers ". All its child elements automatically become container members , be called Flex project （flex item）, abbreviation " project ". 

The container has two axes by default ： Horizontal spindle （main axis） And the vertical cross axis （cross axis）. Starting position of spindle （ The intersection with the border ） be called main start, The ending position is called main end; The starting position of the cross axis is called cross start, The ending position is called cross end.

Container attribute

1.justify-content Property defines the alignment of the item on the spindle  

• flex-start：（ The default value is ） Align left
• flex-end： Right alignment
• center： In the middle
• space-between： full-justified , The intervals between the items are all equal .
• space-around： The spacing between each item is equal .
• space-evenly： The distance between each two items And The distance between the edge item and the container is equal

2.align-items Property defines how items are aligned on the cross axis   

• flex-start： Align the starting points of the intersecting axes Top alignment
• flex-end： The ends of the intersecting axes are aligned Stay down
• center： Align center
• baseline: Baseline alignment of the first line of text for the project .
• stretch:  The default value is ： If the project is not set to height or set to auto, Will fill the entire container .

3.flex-direction Property determines the direction of the spindle （ That is, the arrangement direction of the project ）  

• row：（ The default value is ） The principal axis is horizontal , The starting point is on the left .
• row-reverse： The principal axis is horizontal , The starting point is on the right .
• column： The principal axis is perpendicular , The starting point is on the upper side .
• column-reverse： The principal axis is perpendicular , The starting point is on the lower side .

4.flex-wrap Attribute definitions , If an axis doesn't line up , How to wrap . 

When there is not enough space in the container , Items are smaller than columns

        Space left , The project department will become bigger

• nowrap:（ Default ） Don't wrap
• wrap： Line break , The first row is at the top
• wrap-reverse： Line break , The first row is at the bottom

5.align-content Property defines the alignment of multiple axes      

• flex-start： The whole project is aligned with the starting point of the cross axis . Live on
• flex-end： The whole project is aligned with the end of the cross axis . Stay down
• center： The whole project is aligned with the midpoint of the cross axis . In the middle
• space-between： The distance between every two lines is equal .
• space-around： The spacing on both sides of each line is equal .
• space-evely:   The distance between every two lines And The distance between the edge item and the container is equal
• stretch（ The default value is ）： The axis occupies the entire cross axis