Flex布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。
Flex浏览器支持情况如下：

8712d713c7d0b884a5cb9770efc422b4.jpg

1、容器指定为Flex布局
display: flex;
display: inline-flex;
display: -webkit-flex; /* Safari Webkit内核的浏览器，必须加上-webkit前缀。 /
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
2、容器属性
flex-direction: row | row-reverse | column | column-reverse;

0cbe5f8268121114e87d0546e53cda6e.png

flex-wrap: nowrap | wrap | wrap-reverse;
不换行。| 换行，第一行在上方。| 换行，第一行在下方。
flex-flow: || ;//flex-direction和flex-wrap简写，默认值row nowrap。
justify-content: flex-start | flex-end | center | space-between | space-around;

c55dfe8e3422458b50e985552ef13ba5.png

align-items: flex-start | flex-end | center | baseline | stretch;

2b0c39c7e7a80d5a784c8c2ca63cde17.png

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

f10918ccb8a13247c9d47715a2bd2c33.png

3、项目属性
order：;排列顺序，数值越小越靠前，默认为0。
flex-grow: ; / 放大比例 default 0 /
flex-shrink: ; /缩小比例 default 1 /
flex-basis: | auto; /项目占据的主轴空间 default auto /
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]/flex-grow, flex-shrink 和 flex-basis简写。后两个可选。快捷值auto (1 1 auto) 和 none (0 0 auto)。默认值为0 1 auto /
align-self: auto | flex-start | flex-end | center | baseline | stretch;/对齐方式*/