CSS Flexbox 布局速查表

属性	值	描述
display	flex	启用弹性布局
flex-direction	row	主轴为水平方向，起点在左端
	row-reverse	主轴为水平方向，起点在右端
	column	主轴为垂直方向，起点在上端
	column-reverse	主轴为垂直方向，起点在下端
flex-wrap	nowrap	默认值，项目在一条线排列
	wrap	项目换行
	wrap-reverse	项目反向换行
justify-content	flex-start	主轴对齐方式：左对齐
	flex-end	主轴对齐方式：右对齐
	center	主轴对齐方式：居中
	space-between	主轴对齐方式：两端对齐，项目之间的间隔相等
	space-around	主轴对齐方式：项目两侧的间隔相等
align-items	flex-start	侧轴对齐方式：顶部对齐
	flex-end	侧轴对齐方式：底部对齐
	center	侧轴对齐方式：居中
	baseline	侧轴对齐方式：以文本基线对齐
	stretch	默认值，侧轴对齐方式：拉伸以填满容器
align-content	flex-start	侧轴的对齐方式：顶部对齐
	flex-end	侧轴的对齐方式：底部对齐
	center	侧轴的对齐方式：居中
	space-between	侧轴的对齐方式：两端对齐，项目之间的间隔相等
	space-around	侧轴的对齐方式：项目两侧的间隔相等
	stretch	默认值，侧轴的对齐方式：拉伸以填满容器

属性	值	描述
flex-grow	number	定义项目的放大比例，默认值为 0，即如果存在剩余空间，也不放大
flex-shrink	number	定义了项目的缩小比例，默认值为 1，即如果空间不足，该项目将缩小
flex-basis	auto	定义在分配多余空间之前，项目占据的主轴空间（即主轴尺寸）
align-self	auto	允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
	flex-start	该项目位于容器的起始位置
	flex-end	该项目位于容器的结束位置
	center	该项目位于容器的中间
	baseline	该项目的基线与容器的基线对齐
	stretch	该项目拉伸以填满容器（如果容器有高度）

布局	容器属性	项目属性
水平导航栏	display: flex; justify-content: space-around;
垂直侧边栏	display: flex; flex-direction: column; justify-content: flex-start;
网格布局	display: flex; flex-wrap: wrap; justify-content: space-between;	flex: 1 0 21%;
卡片布局	display: flex; flex-wrap: wrap; justify-content: space-around;	flex: 0 1 calc(33.333% - 10px);