flex容器&项目属性

flex容器属性

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

flex项目属性

1、align-self属性

Internet Explorer 和 Safari 浏览器不支持 align-self 属性

说明：
	align-self 属性规定灵活容器内被选中项目的对齐方式。

	注意：align-self 属性可重写灵活容器的 align-items 属性。

	属性值
		auto 		默认值。元素继承了它的父容器的 align-items 属性。
   如果没有父容器则为 "stretch"。

		Stretch		元素被拉伸以适应容器。
		Center		元素位于容器的中心。
		flex-start		元素位于容器的开头。
		flex-end		元素位于容器的结尾。

2、order

说明：
	number排序优先级，数字越大越往后排，默认为0，支持负数。

3、flex

说明：
	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
	详细属性值：
		缩写「flex: 1」, 则其计算值为「1 1 0%」
		缩写「flex: auto」, 则其计算值为「1 1 auto」
		flex: none」, 则其计算值为「0 0 auto」
		flex: 0 auto」或者「flex: initial」, 则其
        计算值为「0 1 auto」，即「flex」初始值

4、flex-xxx

flex-grow
	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

flex-shrink
	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

flex-basis
	项目的长度