CSS Flexbox 参考表

CSS Flexbox 参考表

容器属性（作用在父元素上）

属性	可选值	默认值	说明
display	flex inline-flex	—	定义块级或行内级 flex 容器
flex-direction	row row-reverse column column-reverse	row	主轴方向：水平左→右 / 水平右→左 / 垂直上→下 / 垂直下→上
flex-wrap	nowrap wrap wrap-reverse	nowrap	是否换行：不换行（压缩） / 换行（第一行在上） / 换行（第一行在下）
flex-flow	<flex-direction> <flex-wrap>	row nowrap	上述两个属性的简写，例：column wrap
justify-content	flex-start flex-end center space-between space-around space-evenly	flex-start	主轴对齐：起点 / 终点 / 居中 / 两端等距 / 项目两侧等距 / 完全等距
align-items	stretch flex-start flex-end center baseline	stretch	单行交叉轴对齐：拉伸填满 / 起点 / 终点 / 居中 / 文字基线对齐
align-content	stretch flex-start flex-end center space-between space-around	stretch	多行交叉轴对齐（需 flex-wrap: wrap 且容器有额外高度）
gap row-gap column-gap	长度值（如 20px、1rem）	0	项目之间的间距。gap 同时设置行/列间距；row-gap 行间距；column-gap 列间距

项目属性（作用在直接子元素上）

属性	可选值	默认值	说明
order	整数（可负）	0	排列顺序，数值越小越靠前
flex-grow	非负数	0	放大比例：剩余空间分配权重。0 表示不放大
flex-shrink	非负数	1	缩小比例：空间不足时的缩小权重。0 表示禁止缩小
flex-basis	长度（200px） 百分比（30%） auto 0%	auto	分配剩余空间前的初始主轴尺寸。auto 参考自身宽高；0% 忽略内容宽度
flex	简写：<flex-grow> <flex-shrink> <flex-basis>	0 1 auto	常用快捷值见下表
align-self	auto（继承容器） stretch flex-start flex-end center baseline	auto	覆盖容器的 align-items，单独定义该项目在交叉轴上的对齐方式

flex 常用快捷值速查

快捷值	展开值	行为说明
flex: 1	1 1 0%	等分剩余空间（忽略内容宽度，从0起点分配）
flex: auto	1 1 auto	基于内容宽度再分配剩余空间（内容越长，最终越大）
flex: none	0 0 auto	固定尺寸，不伸缩（内容多大就多大，溢出也不缩小）
flex: 0 1 auto	默认值	可缩小但不放大，基于内容宽度

对齐方式速查（主轴 vs 交叉轴）

应用场景	使用的属性	常见值
主轴对齐（单行/多行整体）	justify-content	center、space-between、flex-end
交叉轴对齐（单行）	align-items	center、stretch、flex-start
交叉轴对齐（多行整体）	align-content	center、space-between、stretch
单个项目覆盖交叉轴对齐	align-self	center、flex-end、stretch

浏览器兼容性简表

浏览器	最低支持版本	备注
Chrome	29+	完全支持
Firefox	28+	完全支持
Safari	9+	部分旧版需 -webkit- 前缀
Edge	12+	完全支持
IE 10 / 11	部分支持	需 -ms- 前缀，gap 不支持，flex-basis 有 bug