justify-content 和 align-items 分别控制哪个方向？

在 Flexbox 中，justify-content 控制主轴方向的分布，align-items 控制交叉轴方向的对齐。主轴由 flex-direction 决定：row 时主轴是水平方向，column 时主轴变成垂直方向，两个属性的效果也会随之互换。align-content 只在 flex-wrap 换行、出现多行时才起作用。在 Grid 中，justify-* 永远是水平（行内）方向，align-* 永远是垂直（块）方向。

flex: 1 是什么意思？和 flex-grow: 1 一样吗？

flex: 1 是 flex: 1 1 0% 的简写，即可以放大、可以缩小、基础尺寸为 0，所以几个 flex: 1 的子项会严格等分剩余空间，不受内容长短影响。只写 flex-grow: 1 时 flex-basis 仍是 auto，子项先按内容宽度占位，再平分剩下的空间，内容多的子项会更宽。在演练场里切换两种写法就能直观看到区别。

auto-fill 和 auto-fit 有什么区别？

两者都会在一行里放下尽可能多的轨道。区别在于子项不够填满一行时：auto-fill 会保留空的轨道，子项保持 minmax 的最小宽度附近；auto-fit 会把空轨道折叠成 0，让已有子项拉伸占满整行。卡片列表通常用 repeat(auto-fill, minmax(200px, 1fr))。

为什么我的 grid-template-areas 没有生效？

常见原因有三个：每个区域名必须组成一个矩形，不能是 L 形或分成两块；每一行的格子数必须相同；子项需要用 grid-area 指定同名区域。只要有一处不合法，浏览器就会忽略整个 grid-template-areas。区域编辑器会标出不是矩形的区域，并在区域列数与 grid-template-columns 不一致时给出提示。

🍱

🍱Flexbox 与 Grid 布局生成器 - 可视化调试，生成 CSS 与 Tailwind

justify-content 和 align-items 到底谁管哪个方向？flex: 1 和 flex-grow: 1 有什么区别？repeat(auto-fill, minmax()) 会排出几列？与其反复刷新页面试错，不如在这里直接看效果。Flexbox 模式可以调整 flex-direction、flex-wrap、justify-content、align-items、align-content 和行列间距，点击预览中的任意子项还能单独设置 flex-grow、flex-shrink、flex-basis、order 和 align-self；Grid 模式可以输入任意 grid-template-columns / rows（fr、minmax、repeat、auto-fill、auto-fit 都能用），设置 justify/align 的 items 与 content、grid-auto-flow（含 dense），并为每个子项指定 grid-column、grid-row 或区域名。区域编辑器支持在格子上按住拖动框选，把一块矩形命名为 header、sidebar 等，自动生成对齐排版的 grid-template-areas，并检查区域是否为矩形、列数是否与模板一致。可以调整子项数量、容器宽高和内容长短来观察换行与对齐。结果同时给出 CSS、HTML 和 Tailwind CSS 类名（能用标准类就用标准类，其余用任意值写法）。内置水平垂直居中、导航栏、等分列、换行卡片、圣杯布局、侧边栏、自适应卡片网格和仪表盘预设。

免费 · 无需注册 · 浏览器本地处理最后更新：2026-10-26

正在加载工具...

如何使用Flexbox 与 Grid 布局演练场

1选择 Flexbox 或 Grid，或从预设开始（圣杯布局、侧边栏、卡片网格等）
2调整容器属性，点击预览中的子项单独设置；Grid 可开启区域并拖动框选命名
3在 CSS、HTML、Tailwind 三个标签页之间切换，复制生成的代码

常见问题

justify-content 和 align-items 分别控制哪个方向？: 在 Flexbox 中，justify-content 控制主轴方向的分布，align-items 控制交叉轴方向的对齐。主轴由 flex-direction 决定：row 时主轴是水平方向，column 时主轴变成垂直方向，两个属性的效果也会随之互换。align-content 只在 flex-wrap 换行、出现多行时才起作用。在 Grid 中，justify-* 永远是水平（行内）方向，align-* 永远是垂直（块）方向。
flex: 1 是什么意思？和 flex-grow: 1 一样吗？: flex: 1 是 flex: 1 1 0% 的简写，即可以放大、可以缩小、基础尺寸为 0，所以几个 flex: 1 的子项会严格等分剩余空间，不受内容长短影响。只写 flex-grow: 1 时 flex-basis 仍是 auto，子项先按内容宽度占位，再平分剩下的空间，内容多的子项会更宽。在演练场里切换两种写法就能直观看到区别。
auto-fill 和 auto-fit 有什么区别？: 两者都会在一行里放下尽可能多的轨道。区别在于子项不够填满一行时：auto-fill 会保留空的轨道，子项保持 minmax 的最小宽度附近；auto-fit 会把空轨道折叠成 0，让已有子项拉伸占满整行。卡片列表通常用 repeat(auto-fill, minmax(200px, 1fr))。
为什么我的 grid-template-areas 没有生效？: 常见原因有三个：每个区域名必须组成一个矩形，不能是 L 形或分成两块；每一行的格子数必须相同；子项需要用 grid-area 指定同名区域。只要有一处不合法，浏览器就会忽略整个 grid-template-areas。区域编辑器会标出不是矩形的区域，并在区域列数与 grid-template-columns 不一致时给出提示。