弹性盒模型（父属性）

标签：lex   默认   弹性   pac   距离   起点   cti   ever   justify   

开启弹性盒模型：display:flex（写在父级中）

父级盒模型属性及属性值

1.flex-direction   //决定主轴方向

属性值是：row(默认值) 水平方向

　　　　：row-reverse   水平方向布局，但子元素反向

　　　　：column   垂直方向

　　　　：column-reverse   垂直方向布局，但子元素反向

2.flex-wrap  //决定子元素是否换行

　　　　：nowrap(默认值)  不换行

　　　　：wrap   //换行

　　　　：wrap-reverse //换行后。如果只有两行，一二行交换顺序，多行以此类推

3.flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认属性值是：row nowrap;

4.justify-content  //水平对齐方式

　　　　：flex-start(默认值)左对齐

　　　　：flex-end  右对齐

　　　　：center 中间对齐

　　　　：space-around  子元素两边空隙均等 最左，最右空隙是中间空隙的一半

　　　　：space-between  两端对齐，项目之间的距离相等

5.align-items //定义项目在交叉轴上如何对齐

　　　　：flex-start(默认值)  交叉轴的起点对齐

　　　　：flex-end  交叉轴的终点对齐

　　　　：center  交叉轴的中点对齐

　　　　：baseline 项目第一行文字的基线对齐

　　　　：stretch  项目未设置高度或auto，将占满整个容器的高度

6.align-content   //定义多根轴线的对齐方式，如果项目只有一条轴线，该属性不起作用

　　　　：flex-start(默认值)  交叉轴的起点对齐

　　　　：flex-end  交叉轴的终点对齐

　　　　：center  交叉轴的中点对齐

　　　　：baseline 项目第一行文字的基线对齐

　　　　：stretch  项目未设置高度或auto，将占满整个容器的高度

弹性盒模型（父属性）

标签：lex   默认   弹性   pac   距离   起点   cti   ever   justify   

原文地址：http://www.cnblogs.com/AndHowAreYou/p/7751588.html