CSS3 中弹性盒模型--容器的属性

1、display : flex | inline-flex
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性 将失效。

2、flex-direction属性 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;

3、flex-wrap属性，定义子元素是否换行显示
flex-wrap: nowrap | wrap | wrap-reverse;

4、 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;

5、 justify-content属性 定义了项目在主轴（）上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;

6、align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch（默认值）;

7、align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用

 

转载于:https://www.cnblogs.com/littleSpill/p/10950121.html