CSS Flexbox Cheatsheet - Flexbox Layout Reference
页面布局必备的 Flexbox 速查表，从容器属性到常用模式，按场景分类整理，写布局时直接对照。
Back to Web Services容器属性 8
display: flex启用弹性布局（块级）
display: inline-flex启用弹性布局（行内级）
flex-direction: row主轴为行，水平方向（默认）
flex-direction: column主轴为列，垂直方向
flex-direction: row-reverse主轴为行，反向排列
flex-direction: column-reverse主轴为列，反向排列
flex-wrap: wrap允许换行（默认 nowrap 不换行）
flex-flow: row wrapflex-direction 与 flex-wrap 的简写
间距与主轴对齐 8
gap: 16px项目间距（行和列同时设置）
row-gap: 16px仅设置行间距
column-gap: 16px仅设置列间距
justify-content: flex-start主轴起始对齐（默认）
justify-content: center主轴居中对齐
justify-content: flex-end主轴末尾对齐
justify-content: space-between两端对齐，中间等距
justify-content: space-around每项两侧等距
交叉轴对齐 7
justify-content: space-evenly所有间距完全相等
align-items: stretch交叉轴拉伸填满（默认）
align-items: flex-start交叉轴起始对齐
align-items: center交叉轴居中对齐
align-items: flex-end交叉轴末尾对齐
align-items: baseline交叉轴基线对齐
align-content: center多行交叉轴整体对齐（需 wrap）
项目属性 10
flex-grow: 1放大比例，0 不放大（默认）
flex-shrink: 1缩小比例，0 不缩小（默认 1）
flex-basis: 200px初始大小（默认 auto）
flex: 1简写：1 1 0%，等分剩余空间
flex: 0 0 200px简写：不伸缩，固定 200px
flex: auto简写：1 1 auto
flex: none简写：0 0 auto，不伸缩
align-self: flex-end单独对齐，覆盖 align-items
order: 1排列顺序，默认 0，可为负
order: -1排到最前面
常用布局模式 6
justify-content: center; align-items: center水平垂直居中
justify-content: space-between两端对齐（导航栏左右分布）
flex: 1等分剩余空间
margin-left: auto把项目推到主轴末尾
min-height: 100vh配合 column 容器实现粘性页脚（子元素 flex:1 撑开）
flex: 1 0 auto固定基础尺寸且不被压缩（侧边栏）
响应式技巧 5
flex-wrap: wrap窗口变窄时自动换行
flex-basis: 200px; flex-grow: 1响应式卡片网格
flex-wrap: wrap-reverse反向换行布局
@media (max-width: 768px) { flex-direction: column }移动端切换为列布局
flex: 1 1 100%占满整行强制换行
💡 Tips
- flex: 1 是 flex: 1 1 0% 的简写，表示等分剩余空间。
- align-items 是交叉轴对齐，flex-direction: column 时交叉轴变为水平方向。
- gap 属性替代了旧的 margin 技巧，更简洁地设置项目间距。
- flex-wrap: wrap 配合 flex-basis 可以实现响应式网格布局。
- flex 简写优先使用，单独设置 flex-grow/shrink/basis 容易覆盖预期行为。