CSS Flexbox 布局速查表
Flexbox 是 CSS 最常用的布局方式，整理容器和项目属性，配合常用布局模式快速查阅。
返回 Web 服务容器属性 6
display: flex启用弹性布局
flex-direction: row | column主轴方向：行或列
flex-wrap: wrap允许换行
justify-content: center主轴对齐：flex-start/center/space-between/space-around/space-evenly
align-items: center交叉轴对齐：stretch/flex-start/center/flex-end/baseline
gap: 16px项目间距
项目属性 6
flex-grow: 1放大比例，0 不放大
flex-shrink: 0缩小比例，0 不缩小
flex-basis: 200px初始大小
flex: 1简写：grow 1 shrink 1 basis 0
align-self: flex-end单独对齐，覆盖 align-items
order: 1排列顺序，默认 0
常用布局模式 4
justify-content: center; align-items: center水平垂直居中
justify-content: space-between两端对齐，中间等距
flex: 1等分剩余空间
margin-left: auto项目推到右侧
💡 提示
- flex: 1 是 flex: 1 1 0% 的简写，表示等分剩余空间。
- align-items 是交叉轴对齐，flex-direction: column 时交叉轴变为水平方向。
- gap 属性替代了旧的 margin 技巧，更简洁地设置项目间距。
- flex-wrap: wrap 配合 flex-basis 可以实现响应式网格布局。