CSS Flexbox 生成器让你通过实时调整容器和项目属性来可视化构建弹性布局，然后复制可用于生产的 CSS 代码。本指南涵盖每个 flexbox 属性、常见布局模式（导航栏、卡片网格、圣杯布局、侧边栏）、flexbox 与 grid 的选择规则、响应式技术和无障碍最佳实践。
- Flexbox 是一维布局模型，沿单一主轴（行或列）分配空间，通过弹性容器控制。
- 六个容器属性（display、flex-direction、justify-content、align-items、flex-wrap、gap）定义子项的排列、对齐和间距。
- 五个项目属性（flex-grow、flex-shrink、flex-basis、order、align-self）让单个子项覆盖容器级行为。
- 导航栏、卡片网格、圣杯布局和侧边栏等常见模式只需少量 flexbox 声明。
- 一维流动选 Flexbox；二维布局选 CSS Grid。两者可以在同一页面上组合使用。
- 语义化 HTML 加 ARIA 属性确保屏幕阅读器正确理解 flex 重排内容。
为什么使用 CSS Flexbox 生成器？
CSS Flexbox 是现代前端开发中最重要的布局系统之一，但容器属性、项目属性和轴行为之间的交互在脑中很难想象。CSS Flexbox 生成器为你提供实时可视化画布：调整属性，立即看到结果，然后将精确的 CSS 复制到你的项目中。
无论你是在设计导航栏、构建卡片网格，还是构造全页面布局，可视化弹性盒布局构建器都能节省时间并减少反复试错。下面我们从两个轴开始，涵盖你需要的每个 flexbox 概念，直到可用于生产的响应式模式。
理解两个轴
每个弹性容器都有两个轴。主轴沿 flex-direction 设定的方向运行（默认：row，即从左到右）。交叉轴与其垂直。所有 justify-* 属性沿主轴工作；所有 align-* 属性沿交叉轴工作。
如果将 flex-direction 改为 column，主轴变为垂直方向，交叉轴变为水平方向。这种轴交换是许多初学者错误的根源，所以在切换方向时请牢记这一点。
/* Main axis = horizontal (default) */
.container {
display: flex;
flex-direction: row; /* Main axis: left -> right */
}
/* Main axis = vertical */
.container-column {
display: flex;
flex-direction: column; /* Main axis: top -> bottom */
}Flex 容器属性
弹性容器是任何设置了 display: flex（或 inline-flex）的元素。以下六个属性控制其子元素（弹性项目）的排列方式。
display: flex | inline-flex
display: flex 创建占满父元素宽度的块级弹性容器。display: inline-flex 创建仅占子元素所需宽度的行内级弹性容器。大多数布局中使用 flex。
.flex-block { display: flex; } /* Block-level flex container */
.flex-inline { display: inline-flex; } /* Inline-level flex container */flex-direction
设置主轴方向。接受四个值：row（默认，从左到右）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）。row 是最常用的。
.row { flex-direction: row; } /* Default: left to right */
.row-rev { flex-direction: row-reverse; } /* Right to left */
.col { flex-direction: column; } /* Top to bottom */
.col-rev { flex-direction: column-reverse; } /* Bottom to top */justify-content
沿主轴分布项目。常用值：flex-start、flex-end、center、space-between（项目间等距，边缘无间距）、space-around（每个项目周围等距）、space-evenly（项目间和边缘等距）。
.container {
display: flex;
justify-content: flex-start; /* Pack items at the start */
justify-content: flex-end; /* Pack items at the end */
justify-content: center; /* Center items */
justify-content: space-between; /* Equal space between, no edges */
justify-content: space-around; /* Equal space around each item */
justify-content: space-evenly; /* Equal space everywhere */
}align-items
沿交叉轴对齐项目。常用值：stretch（默认）、flex-start、flex-end、center、baseline（按文本基线对齐）。在行布局中用它来垂直居中项目。
.container {
display: flex;
align-items: stretch; /* Default: fill cross axis */
align-items: flex-start; /* Pack at cross-axis start */
align-items: flex-end; /* Pack at cross-axis end */
align-items: center; /* Center on cross axis */
align-items: baseline; /* Align by text baseline */
}flex-wrap
控制项目是否可以换行。nowrap（默认）强制所有项目在一行。wrap 允许换行。wrap-reverse 反向换行。响应式卡片网格几乎总是需要 wrap。
.container {
display: flex;
flex-wrap: nowrap; /* Default: single line */
flex-wrap: wrap; /* Allow wrapping */
flex-wrap: wrap-reverse; /* Wrap in reverse direction */
}gap（row-gap、column-gap）
在项目之间添加间距，不影响外边缘。gap: 16px 同时设置行间距和列间距。也可以独立使用 row-gap 和 column-gap。这是推荐的现代方法，替代了旧的基于 margin 的间距技巧。
.container {
display: flex;
gap: 16px; /* Both row and column gap */
row-gap: 20px; /* Only between rows */
column-gap: 12px; /* Only between columns */
}Flex 项目属性
这些属性设置在单个弹性项目（容器的直接子元素）上，用于覆盖容器级行为。
flex-grow
定义项目在有额外空间时应增长多少。默认值为 0（不增长）。如果一个项目 flex-grow: 2，另一个 flex-grow: 1，前者获得两倍的额外空间。
.item-a { flex-grow: 0; } /* Default: do not grow */
.item-b { flex-grow: 1; } /* Take 1 share of extra space */
.item-c { flex-grow: 2; } /* Take 2 shares of extra space */flex-shrink
定义项目在空间不足时应收缩多少。默认值为 1。设为 0 可防止项目收缩。适用于固定宽度的侧边栏。
.sidebar { flex-shrink: 0; } /* Never shrink (fixed width) */
.content { flex-shrink: 1; } /* Default: allow shrinking */flex-basis
设置项目在 flex-grow 和 flex-shrink 分配剩余空间之前的初始主轴尺寸。接受任何长度（200px、30%）或 auto。把它想象成 flex 算法启动前的起点。
.item { flex-basis: auto; } /* Use content/width as basis */
.item { flex-basis: 200px; } /* Start at 200px, then grow/shrink */
.item { flex-basis: 30%; } /* Start at 30% of container */
.item { flex-basis: 0%; } /* Start at zero, grow equally */flex 简写
flex 简写组合了 grow、shrink 和 basis：flex: 1 是 flex: 1 1 0% 的简写（从零基础等比增长）。flex: 0 0 auto 表示项目不伸缩。推荐使用简写，因为它设置了智能默认值。
/* Recommended shorthand values */
.item { flex: 1; } /* flex: 1 1 0% -> grow equally */
.item { flex: auto; } /* flex: 1 1 auto -> grow from content size */
.item { flex: none; } /* flex: 0 0 auto -> inflexible */
.item { flex: 0 0 200px; } /* Fixed at 200px, no grow/shrink */order
控制项目的视觉顺序。所有项目默认 order: 0。值越小越靠前。这是纯视觉效果，不改变 DOM 顺序（辅助技术读取的是 DOM 顺序）。
.item-first { order: -1; } /* Moves to the start */
.item-normal { order: 0; } /* Default position */
.item-last { order: 1; } /* Moves to the end */align-self
覆盖容器的 align-items 值。例如，你可以将大多数项目居中，但通过设置 align-self: flex-start 让某个项目贴顶。
.container { align-items: center; }
.special-item { align-self: flex-start; } /* Override: stick to top */
.stretched { align-self: stretch; } /* Override: fill height */常见 Flexbox 布局模式
以下是你最常用的模式，每个都可以直接复制使用。
导航栏
左侧 logo、右侧链接的响应式导航栏是最经典的 flexbox 模式。在容器上使用 justify-content: space-between，配合 align-items: center 垂直居中。
/* Responsive Navigation Bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 64px;
background: #1a1a2e;
}
.navbar .logo { font-size: 20px; font-weight: 700; }
.navbar .links {
display: flex;
gap: 24px;
list-style: none;
}卡片网格
将 flex-wrap: wrap 与固定 flex-basis 结合，创建响应式卡片网格。每张卡片使用 flex: 0 0 calc(33.333% - 16px) 实现带间距的三列布局。小屏幕上改为 calc(50% - 16px) 或 100%。
/* Responsive Card Grid */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 0 0 calc(33.333% - 16px); /* 3 columns */
border-radius: 8px;
padding: 20px;
}
/* Tablet: 2 columns */
@media (max-width: 768px) {
.card { flex: 0 0 calc(50% - 16px); }
}
/* Mobile: 1 column */
@media (max-width: 480px) {
.card { flex: 0 0 100%; }
}圣杯布局
经典三列布局（左侧边栏、主内容、右侧边栏）加页头页脚。外层容器使用 flex-direction: column 和 min-height: 100vh。中间行使用嵌套弹性容器 flex-direction: row。主内容区域用 flex: 1 填充剩余空间。
/* Holy Grail Layout */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header, .footer {
flex: 0 0 auto; /* Fixed height */
}
.middle {
display: flex;
flex: 1; /* Fill remaining vertical space */
}
.left-sidebar { flex: 0 0 200px; }
.main-content { flex: 1; }
.right-sidebar { flex: 0 0 200px; }
@media (max-width: 768px) {
.middle { flex-direction: column; }
.left-sidebar, .right-sidebar { flex: 0 0 auto; }
}侧边栏布局
固定宽度侧边栏和弹性主内容的两列布局。侧边栏使用 flex: 0 0 280px（固定 280px，不伸缩），主内容使用 flex: 1 填充剩余空间。
/* Sidebar Layout */
.layout {
display: flex;
gap: 24px;
}
.sidebar {
flex: 0 0 280px; /* Fixed width, no grow or shrink */
}
.main {
flex: 1; /* Fill remaining space */
min-width: 0; /* Allow shrinking below content size */
}完美居中
最简单的模式：在容器上设置 display: flex; justify-content: center; align-items: center。子元素水平和垂直都居中。添加 min-height: 100vh 实现全页居中。
/* Perfect Centering */
.center-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}粘性页脚
用 flex-direction: column 和 min-height: 100vh 包裹页面。给主内容 flex: 1。页脚始终贴底，即使内容很短。
/* Sticky Footer */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page-content { flex: 1; } /* Pushes footer to bottom */
.page-footer { flex-shrink: 0; }Flexbox vs CSS Grid：决策指南
Flexbox 和 CSS Grid 互补而非竞争。以下是实用的决策框架。
- 需要一维流动（单行或单列）
- 内容大小应驱动布局（项目决定自身宽度）
- 需要基于内容感知的动态换行
- 构建组件内部结构（工具栏按钮、导航项目）
- 需要二维布局（同时控制行和列）
- 布局应驱动内容放置（固定轨道和区域）
- 需要命名网格区域的复杂页面布局
- 需要同时精确控制两个轴的对齐
实际上，大多数生产站点两者兼用：Grid 用于页面级布局，Flexbox 用于组件级对齐。
/* Combining Grid + Flexbox */
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
}
/* Flexbox inside grid areas */
.header {
grid-area: header;
display: flex; /* Flex for component internals */
justify-content: space-between;
align-items: center;
}响应式 Flexbox 模式
Flexbox 在响应式设计中表现出色，因为项目自然适应可用空间。
方向切换
桌面端使用 flex-direction: row，移动端通过媒体查询切换为 flex-direction: column。这是最简单的响应式模式。
/* Direction Switching */
.container {
display: flex;
flex-direction: row;
gap: 16px;
}
@media (max-width: 640px) {
.container { flex-direction: column; }
}使用 flex-basis 换行
设置最小 flex-basis（如 flex: 1 1 300px）。容器宽时项目保持一行，每个项目无法维持 300px 时自动换行。无需媒体查询。
/* Auto-wrapping with flex-basis (no media queries needed) */
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1 1 300px; /* Grow, shrink, min 300px */
}Order 重排
在媒体查询中使用 order 属性在不同屏幕尺寸上重排项目。例如，通过 order: 2 在移动端将侧边栏移至主内容下方。
/* Order Reordering on Mobile */
.sidebar { order: 0; }
.content { order: 0; }
@media (max-width: 768px) {
.sidebar { order: 2; } /* Move sidebar below content */
.content { order: 1; }
}无障碍考虑
Flexbox 的视觉重排如果处理不当，可能会造成无障碍问题。
- DOM 顺序至关重要。屏幕阅读器和键盘导航遵循 DOM 顺序，而非视觉顺序。保持 DOM 顺序合乎逻辑，仅将 CSS order 用于微小的视觉调整。
- 使用语义化 HTML。弹性容器仍应使用正确的元素：
<nav>用于导航，<main>用于主内容，<aside>用于侧边栏。 - 键盘测试。用 Tab 键浏览布局，确保焦点顺序与阅读顺序一致。
- ARIA 地标。当语义元素不够时使用
role属性。 - 避免仅依赖视觉线索。如果使用 flex 排序在视觉上分组相关项目，确保 HTML 结构也传达了这种关系。
<!-- Semantic HTML with Flexbox -->
<nav style="display: flex; justify-content: space-between; align-items: center;">
<a href="/" aria-label="Home">Logo</a>
<ul role="list" style="display: flex; gap: 16px; list-style: none;">
<li><a href="/about">About</a></li>
<li><a href="/tools">Tools</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<main style="display: flex; gap: 24px;">
<article style="flex: 1;">Main Content</article>
<aside style="flex: 0 0 280px;" aria-label="Sidebar">Sidebar</aside>
</main>性能和调试技巧
- 使用浏览器 DevTools flexbox 覆盖层。Chrome、Firefox 和 Edge 都有内置的弹性容器高亮显示。
- 对溢出的项目设置 min-width: 0。弹性项目默认 min-width: auto，这会阻止它们缩小到内容尺寸以下。
- 优先使用 gap 而非 margin。gap 属性只在项目之间创建间距，不在外边缘。
- 使用 flex 简写。写
flex: 1比分别声明更可读且默认值更好。
常见问题
什么是 CSS Flexbox 生成器？它如何工作？
CSS Flexbox 生成器是一个可视化工具，让你通过交互界面配置弹性容器和项目属性。你调整 flex-direction、justify-content、align-items、gap、flex-grow 和 flex-shrink 等设置，然后实时看到布局更新。满意后，直接将生成的 CSS 代码复制到你的项目中。
Flexbox 中 justify-content 和 align-items 有什么区别？
justify-content 沿主轴分布项目（默认 flex-direction: row 时为水平方向），align-items 沿交叉轴对齐项目（默认为垂直方向）。如果设置 flex-direction 为 column，轴互换。
什么时候应该用 Flexbox 而不是 CSS Grid？
一维布局用 Flexbox，二维布局用 CSS Grid。实际项目中通常两者结合：Grid 做页面结构，Flexbox 做组件内部。
如何让所有弹性项目等宽？
所有项目设置 flex: 1（即 flex-grow: 1, flex-shrink: 1, flex-basis: 0%）。如果宽度仍不一致，再加 min-width: 0。
为什么弹性项目不能缩小到内容尺寸以下？
弹性项目默认 min-width: auto，阻止它们缩小到最小内容宽度以下。添加 min-width: 0 即可解决（列布局用 min-height: 0）。
Flexbox 可以使用 gap 属性吗？
可以。所有现代浏览器都支持 Flexbox 的 gap 属性（Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+）。它只在项目之间创建间距，优于基于 margin 的方法。
如何用 Flexbox 创建响应式卡片网格？
容器设置 flex-wrap: wrap，每张卡片给一个最小 flex-basis，如 flex: 1 1 300px。宽度足够时保持一行，不够时自动换行。配合 gap 实现一致间距。
flex order 会影响屏幕阅读器和无障碍吗？
CSS order 属性只改变视觉顺序，不改变 DOM 顺序。屏幕阅读器和键盘导航遵循 DOM 顺序。保持 DOM 逻辑顺序，仅将 order 用于微小的视觉调整。
开始使用 Flexbox 构建
CSS Flexbox 是每个前端开发者日常使用的必备布局工具。理解两轴关系、掌握六个容器属性和五个项目属性、知道何时选择 Flexbox 与 Grid，将显著提升你构建响应式 UI 的速度。使用我们的交互式 Flexbox 生成器来可视化实验这些属性并复制可用于生产的代码。