css3 display:flex 属性

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

注意：设置了 display:flex 之后 ，子元素的float、clear和vertical-align属性将失效。

一、基本概念

二、容器的属性

       1、flex-direction   决定容器内元素的排列方向，也就是主轴方向。

   语法   

   共有4个值：

2、flex-wrap： 默认情况下所有元素都排列在一条轴线上。flex-wrap.定义了如果在一行放不下的换行问题

          

3、flex-flow:是  flex-direction 和  flex-wrap  属性的简写

语法：默认为：flex-flow：row nowrap

4、justify-content    定义了元素在主轴上的对齐方式

                          

有五个值：

5、align-items   属性定义在纵轴如何对齐，也就是在交叉轴如何对齐。

可以取5个值：

6、align-content:      定义多根轴线的对齐方式，如果只有一根，则该属性不起作用 。

                      

三、项目的属性，也就是容器内元素的属性

  1、order   属性

2、flex-grow 属性

3、flex-shrink  属性

4、flex-basis 属性

5、flex    flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

6、align-self 属性