📏 Flexbox布局器
弹性布局 · 实时预览 · 快捷预设
Item 1
Item 2
Item 3
Item 4
弹性布局 · 实时预览 · 快捷预设
Flexbox（弹性盒子布局）是CSS3的布局模块，用于在一维空间（行或列）中排列和对齐元素。相比传统的float和position，Flexbox让复杂的居中、等分、自适应布局变得简单。
justify-content控制主轴方向对齐（行模式是水平），align-items控制交叉轴方向对齐（行模式是垂直）。主轴方向由flex-direction决定。
flex-wrap控制元素是否换行。nowrap强制一行（可能溢出），wrap允许换行。结合gap可以创建类似小网格的响应式布局，而无需使用media query。
flex是三个值的简写：flex-grow(放大比例)、flex-shrink(收缩比例)、flex-basis(基础尺寸)。flex:1等价于1 1 0%，表示可放大可收缩、占满剩余空间。
只要给父容器display:flex加上justify-content:center和align-items:center，就能同时实现水平和垂直居中，不用再算margin或position偏移，是当前最主流的居中方案。
子元素默认flex-shrink:1会收缩。给具体子元素设flex-shrink:0即可禁止压缩，或设min-width避免被压到内容都放不下。
gap是flex/grid容器原生控制项目间距的属性，不会给首尾元素加多余间距，也无需nth-child去处理。margin则每个元素都要单独处理。现代浏览器都支持gap。
简单规则：一维用flex（一行或一列里的排列），二维用grid（同时控制行列的网格）。组件内部用flex，页面整体结构用grid，两者互补。
Flexbox的一维模型围绕"主轴(main axis)"和"交叉轴(cross axis)"展开。主轴方向由flex-direction决定，justify-content控制主轴对齐，align-items控制交叉轴对齐。
| flex-direction | 主轴方向 | justify-content | align-items |
|---|---|---|---|
| row | 水平(默认左→右) | 水平对齐 | 垂直对齐 |
| row-reverse | 水平(右→左) | 水平对齐 | 垂直对齐 |
| column | 垂直(上→下) | 垂直对齐 | 水平对齐 |
| column-reverse | 垂直(下→上) | 垂直对齐 | 水平对齐 |
记不住就理解为：主轴是你的主方向，justify跟着主轴走，align跟交叉轴走。
| 对齐值 | 主轴效果 | 典型场景 |
|---|---|---|
| flex-start | 起点排列 | 工具栏左侧对齐 |
| flex-end | 终点排列 | 分页器靠右 |
| center | 居中 | 弹窗标题、登录框 |
| space-between | 首尾贴边均分 | 导航栏 logo+菜单 |
| space-around | 元素两侧等距 | 图标按钮组 |
| space-evenly | 全部空隙相等 | 均分菜单项 |
space-between和space-around最容易混：between首尾贴边，around首尾有一半间距。
flex: 放大 收缩 基准。默认flex:0 1 auto（不放大、可收缩、按内容尺寸）。设置flex:1能让子项按比例瓜分剩余空间，是等分布局的关键。
| 写法 | 含义 | 用途 |
|---|---|---|
| flex: 1 | 1 1 0% | 子项拉伸占满，等分 |
| flex: 0 1 auto | 默认 | 按内容尺寸，可收缩 |
| flex: 0 0 200px | 0 0 200px | 固定200px，不伸缩 |
| flex: 2 1 0% | 2 1 0% | 占两倍于flex:1的份量 |
想让某列固定宽度、其余自适应，就给固定列 flex:0 0 200px，其余 flex:1。
| 布局 | 关键代码 | 说明 |
|---|---|---|
| 垂直居中 | justify-content:center; align-items:center | 一行搞定 |
| 等分工具栏 | 子项 flex:1 | 均分剩余空间 |
| 吸底 footer | 容器 flex column; 内容 flex:1 | footer 贴底 |
| 两侧分布 | justify-content:space-between | logo在左、菜单在右 |
这些套路代码量少、好维护，是前端布局的高频模板。
| 取值 | justify(主轴)效果 | align(交叉轴)效果 |
|---|---|---|
| flex-start | 靠起点排 | 靠交叉轴起点 |
| flex-end | 靠终点排 | 靠交叉轴终点 |
| center | 居中 | 居中 |
| space-between | 首尾贴边均分 | —(多行时用) |
| space-around | 元素两侧等距 | — |
| space-evenly | 全部空隙相等 | — |
| stretch | — | 子项拉伸填满(align默认) |
| baseline | — | 按文字基线对齐 |
| 属性 | 作用 | 示例 |
|---|---|---|
| flex-grow | 放大比例 | flex-grow:1 占满 |
| flex-shrink | 收缩比例 | flex-shrink:0 禁压 |
| flex-basis | 基础尺寸 | flex-basis:200px |
| order | 排列顺序 | order:-1 排最前 |
| align-self | 单独对齐 | align-self:flex-end |
| margin:auto | 自动吸收剩余空间 | margin-left:auto 右推 |
1. 选择flex-direction控制主轴方向。
2. 调整justify-content控制主轴对齐。
3. 调整align-items控制交叉轴对齐。
4. 设置flex-wrap和gap。
5. 复制生成的CSS代码使用。