css Flex布局速查

Flex布局速查
属性分类	属性名	值	注释
容器属性	flex-direction (dəˈrekʃn)	项目排列的方向
		row（默认）	水平方向，起点在左
		row-reverse	水平方向，起点在右
		column	垂直方向，起点在上
		column-reverse	垂直方向，起点在下
	flex-wrap (ræp)	换行规则
		nowrap（默认）	不换行
		wrap	换行，第一行在上面
		warp-reverse	换行，第一行在下面
	flex-flow (floʊ)	flex-direction||flex-wrap 缩写
	justify-content	在主轴上的对齐方式
		flex-start	左对齐
		flex-end	右对、齐
		center	居中
		space-between	项目两端对齐
		space-around	项目两侧对齐，项目间隔是边框间隔两倍
	align-items	交叉轴对齐
		flex-start	交叉轴的起点对齐
		flex-end	交叉轴的终点对齐。
		center	交叉轴的中点对齐。
		baseline	项目的第一行文字的基线对齐。
		stretch（默认值） (stretʃ)	如果项目未设置高度或设为auto，将占满整个容器的高度。
	align-content	多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
		flex-start	与交叉轴的起点对齐。
		flex-end	与交叉轴的终点对齐
		center	与交叉轴的中点对齐。
		space-between	与交叉轴两端对齐，轴线之间的间隔平均分布。
		space-around (speɪs - əˈraʊnd)	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
		stretch（默认值）	轴线占满整个交叉轴。
项目属性	order		项目的排列顺序。数值越小，排列越靠前，默认为0
	flex-grow		属性定义项目的放大比例
	flex-shrink (ʃrɪŋk)		属性定义项目的缩小比例
	flex-basis
	flex	auto (1 1 auto) 和 none (0 0 auto)	flex-grow,flex-shrink,flex-basis的缩写