flex弹性布局常用属性汇总

马黑黑

推荐文章： 超详细的flex布局

下面是容器和项目常用属性汇总：

1️⃣ 容器常用属性

序号	属性名称	含义与作用	可选值（头一个为默认值）
1	flex-direction	设置主轴方向	row / row-reverse / column / column-reverse
2	flex-wrap	设置子元素是否换行	no-wrap / wrap / wrap-reverse
3	flex-flow	复合属性，相当于同时设置了 flex-direction 和 flex-wrap	赋值参考1和2
4	justify-content	设置主轴上子元素的排列方式	flex-start / flex-end / center / space-between / space-around / space-evenly
5	align-items	设置侧轴上子元素的排列方式（单行）	flex-start / flex-end / center / baseline /stretch
6	align-content	设置侧轴上子元素的排列方式（多行）	flex-start / flex-end / center / space-between / space-around / space-evenly / stretch

2️⃣ 子项常用属性

序号	属性名称	含义与作用	可选值（头一个为默认值）
1	flex-grow	定义项目的放大比例	0 / 1 / N
2	flex-shrink	定义项目的缩小比例	1 / 0 / 2 / N
3	flex-basis	定义在分配多余空间之前，项目占据的主轴空间（main size）	auto / content / length
4	flex	flex-grow、flex-shrink、flex-basis的复合属性（建议的用法）	赋值参考 1、2 和 3
5	order	定义子项的排列顺序（前后顺序）	数值越小，排列越靠前，默认为 0，支持正负整数
6	align-self	控制子项自己在侧轴的排列方式	auto / flex-start / flex-end / center / baseline / stretch

马黑黑

【附】flex弹性布局简单演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!