Flex容器和项目上的常用属性

容器的属性

flex-direction

决定主轴方向，主轴方向影响了项目的排列方向

flex-wrap

换行

flex-flow

结合了 flex-direction 和 flex-wrap 的属性

.box {
	flex-flow: <flex-direction> <flex-wrap>;
}

justify-content

项目在主轴上的对齐方式

align-items

项目在交叉轴上的对齐方式

align-content

多根轴线的对齐方式（项目只有一根轴线时无效）

	.box {
	  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
	}

项目的属性

order

项目的排序顺序 数值越小排列越靠前 默认为0

flex-grow

项目的放大比例 默认为0（即不放大）

flex-shrink

项目的缩小比例 默认为1（即空间不足，该项目会缩小） 0不缩小

flex-basis

分配多余空间之前，计算项目占据主轴的空间，再进行分配

flex

结合了 flex-grow flex-shrink 和 flex-basis 的属性

	.item {
	  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
	}

关于空间的分配，我举一个小例子，比如美团的 5x2 方格

css：

	ul{
		display: flex;
		flex-wrap: wrap;
	}
	li{
		flex: 0 0 20%;
	}

align-self

可以设置单个项目与其他项目不一样的对齐方式（可覆盖align-items）默认为auto 继承父元素align-items的属性 如果没有父元素 等同于stretch

	.item {
	  align-self: auto | flex-start | flex-end | center | baseline | stretch;
	}