flex布局

1
2
3
4

Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1

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

1

flex-direction: row | row-reverse | column | column-reverse;

1

flex-wrap: nowrap | wrap | wrap-reverse;

1

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

1

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

1

align-items: flex-start | flex-end | center | baseline | stretch（默认值）;

1
2

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用

1
2

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

1
2
3
4
5
6
7

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