Flex layout

Traditional solutions for layout , Based on the box model , rely on display attribute + position attribute + float attribute .

It is very inconvenient for those special layouts , such as , Vertical centering is not easy to achieve .2009 year ,W3C Put forward a new scheme ----Flex Layout , It's easy 、 complete 、 Responsive implementation of various page layouts .

at present , It's supported by all browsers , It means , Now you can use this function safely

One 、Flex What is the layout ？
Flex yes Flexible Box Abbreviation , Meaning for " Elastic layout ", To provide maximum flexibility for box models . Any container can be specified as Flex Layout .

.box{
display: flex;
}

Inline elements can also be used Flex Layout .
.box{
display: inline-flex;
}

Webkit Browser for kernel , Have to add -webkit Prefix .
.box{
display: -webkit-flex; /* Safari */
display: flex;
}

Set up Flex After the layout , The child element float、clear and vertical-align invalid ;

Two 、 Basic concepts
use 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 . 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 cross end.

Items are arranged along the main axis by default . The spindle space occupied by a single project is called main size, The space occupied by the cross axis is called cross size.