CSS Flexbox 生成器，免费

使用方法

1. 设置容器属性：配置 flex 容器 · flex-direction、justify-content、align-items、flex-wrap 和 gap。
2. 添加并配置 flex 项目：增加子项目并分别设置每个项目的 flex-grow、flex-shrink、flex-basis、align-self 和 order。
3. 复制 CSS：获取容器和项目的完整 CSS，可直接在项目中使用。

为什么使用 Flexbox 生成器？

Flexbox 是 CSS 一维布局的核心工具 · 以行或列方式对齐元素，并提供强大的分布和对齐控制。但其属性众多且相互关系复杂：justify-content 与 align-items、flex-grow 与 flex-basis、主轴与交叉轴。此交互式生成器在您修改每个属性时提供即时视觉反馈，是学习 Flexbox 并获得符合您布局所需 CSS 的最快方式。

功能特性

• 交互式预览：拖动 flex 项目并切换属性，实时查看变化。
• 所有容器属性：flex-direction、flex-wrap、justify-content、align-items、align-content 和 gap。
• 单项目控制：为每个项目单独设置 flex-grow、flex-shrink、flex-basis、align-self 和 order。
• 可视化轴指示：高亮显示主轴和交叉轴，以强化概念模型。
• CSS 输出：为容器和所有已配置项目生成可直接复制的完整 CSS。

常见问题

justify-content 和 align-items 有什么区别？

justify-content 沿主轴（默认水平方向）分布项目。align-items 沿交叉轴（默认垂直方向）对齐项目。当 flex-direction 为 column 时，两条轴互换 · justify-content 变为垂直方向，align-items 变为水平方向。

何时使用 Flexbox，何时使用 CSS Grid？

对一维布局使用 Flexbox · 一行按钮、导航栏、需要自动换行的卡片列表。对二维布局使用 CSS Grid，即需要同时控制行和列的场景，如整页布局或复杂卡片网格。

flex: 1 是什么意思？

flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写。它告诉项目增长以填充可用空间、必要时收缩，并在分配空间前从零开始。所有 flex: 1 的项目会均等地共享空间。

Flexbox 的真正作用

Flexbox（Flexible Box Layout）是一种 CSS 布局模型，专为在一维方向（行或列）分配空间和对齐项目而设计。它引入了决定一切行为的两个核心概念：主轴（项目流动的主要方向，默认水平）和交叉轴（垂直于主轴，默认垂直）。一旦你内化了主轴与交叉轴，每个 Flexbox 属性都对应其中一个：justify-content 作用于主轴，align-items 作用于交叉轴，flex-direction 交换哪个轴是哪个。

Flexbox 解决了 1998 年至 2014 年困扰 web 开发者的一系列布局问题。在 Flexbox 之前，垂直居中元素需要黑客（display: table-cell、负边距、带 translate 变换的 position: absolute）。等高列需要带背景图的「假列」技巧。粘性页脚需要精确的像素计算。Flexbox 让所有这些变得微不足道：单行声明替代数十年的 CSS 变通方法。权衡是 Flexbox 是一维的；对于二维布局（同时行 AND 列），CSS Grid（2017 年发布）是更好的工具。

Flexbox 属性清晰地分为两组：容器属性（应用于父级：display: flex、flex-direction、flex-wrap、justify-content、align-items、align-content、gap）和项目属性（应用于子级：flex-grow、flex-shrink、flex-basis、align-self、order）。容器属性控制布局模式；项目属性控制个别例外。该生成器展示这两组，让你无需编写代码即可实验它们如何交互。

本工具的幕后运作

实时预览是带有示例子元素的 flex 容器。当你通过下拉菜单和输入更改容器属性（flex-direction、justify-content 等）时，JavaScript 更新预览容器的内联样式，浏览器重新渲染布局。预览是浏览器实际的 Flexbox 实现，而非 JavaScript 模拟：你看到的正是你的 CSS 在真实页面上将产生的效果。

按项目控件让你单独调整每个子元素。你可以添加或删除项目，设置它们的 flex-grow、flex-shrink、flex-basis、align-self 和 order 值，并查看容器如何相应地重新分配空间。视觉轴指示器显示当前配置的主轴和交叉轴，强化心理模型。属性是真正的 CSS，你可以直接复制到样式表中，无需转译或框架前缀。

生成的 CSS 面板随每次交互更新，生成两条 CSS 规则：一条用于容器（带所选 flex 属性），一条用于项目。点击「复制 CSS」，规则被写入你的剪贴板。该工具本身从不发出网络请求；预览渲染、代码生成和剪贴板写入都在你设备上的 JavaScript 中发生。刷新页面，除非你先复制了 CSS，否则你的配置就消失了。

Flexbox 简史

• CSS 2.1 布局混乱，1998 至 2008 年。在 Flexbox 之前，web 开发者使用带 clearfix 黑客的 float: left、带空格 bug 的 display: inline-block，或带 table-cell 技巧的 display: table 进行布局。垂直居中需要 table-cell 上的 vertical-align、负边距技巧或绝对定位。等列需要 JavaScript。web 社区生成数千篇关于「如何用 CSS 做 X」变通方法的博客文章。
• 首个 Flexible Box 草案，2009 年。W3C CSS 工作组于 2009 年 7 月发布了 CSS Flexible Box Layout Module 的首个工作草案，在接下来的五年内演变出三种语法：原始的 box-* 语法（迅速被弃用）、2011 年的中间 flexbox 语法（仍在遗留 IE 10 代码中可见），以及我们今天使用的最终 flex 语法。
• 浏览器支持稳定，2014 年。Chrome 29、Firefox 28、Safari 9 和 IE 11 到 2014 年都发布了可用的 Flexbox，IE 11 保留了一些有 bug 的边缘情况。从「Flexbox 是未来」到「Flexbox 是现在」的过渡发生在 2014-2015 年，因为生产网站为主要布局采用它。「Holy Grail Layout」（页眉、页脚、两个侧栏、主内容）变得微不足道。
• Chris Coyier 的《A Complete Guide to Flexbox》，2013 年。CSS-Tricks 发布了 Chris Coyier 的全面 Flexbox 指南（2013 年 4 月），成为规范参考。到 2016 年，该指南在任何 Flexbox 问题的搜索结果中名列前茅，并被翻译成数十种语言。它戏剧性地加速了 Flexbox 的采用。
• CSS Grid 作为补充到来，2017 年。CSS Grid Layout 在 Chrome 57、Firefox 52 和 Safari 10.1（2017 年 3 月）中发布。Grid 远不是替代 Flexbox，而是补充它：Flexbox 在一维行/列布局中表现出色，Grid 在二维布局中表现出色。现代设计通常同时使用两者：Grid 用于页面级结构，Flexbox 用于组件内部排列（导航项、按钮组、卡片内容）。
• gap 属性和 subgrid 登陆，2020 至 2024 年。gap 属性（最初仅限 Grid）到 Safari 14.1（2021 年 4 月）在所有主要浏览器中与 Flexbox 兼容。更干净的 gap: 1rem 语法替代了旧的「除最后一个外每个子级设置外边距」模式。CSS Subgrid（2023+）让嵌套网格与父网格轨道对齐，对组件系统布局很有用。

真实世界的工作流

• 导航栏。左侧 logo 和右侧链接的水平导航是 Flexbox 的典型用例。容器使用 display: flex; justify-content: space-between; align-items: center;，就完成了。添加 gap: 1.5rem 用于链接之间的间距。这 4 行 CSS 替代了曾经需要 float、clearfix 和像素完美外边距数学的内容。
• 垂直和水平居中。经典的「如何让这个 div 居中？」问题有一个 Flexbox 答案：父级使用 display: flex; justify-content: center; align-items: center;。无论子元素的固有大小、父级的高度、动态内容变化如何都有效。这是 Flexbox 为 web 开发带来的最大生活质量改进。
• 带换行的卡片列表布局。一行卡片在窄屏上换行到多行：容器使用 display: flex; flex-wrap: wrap; gap: 1rem;，每张卡片使用 flex: 1 1 250px。卡片生长以填充可用空间，缩小到最低 250px，并在 250px 不适合时换行到新行。无需媒体查询的响应式设计。
• 带标签输入的表单行。表单经常需要标签和输入对齐：行使用 display: flex; gap: 0.5rem;，标签使用 flex: 0 0 120px（固定 120px 宽度），输入使用 flex: 1（填充剩余空间）。调整表单容器的大小使标签保持固定，输入拉伸。比 CSS Grid 用于两列表单行更容易。
• 粘性页脚。当内容短时让页脚粘在视口底部，但当内容长时跟随内容：body { display: flex; flex-direction: column; min-height: 100vh; } 配 main { flex: 1 } 将页脚向下推。经典的「粘性页脚」问题用三个 CSS 声明解决，替代了 2010 年代的负边距变通方法。
• 标签和徽章组。应该水平流动并换行到新行的标签、芯片或徽章列表：display: flex; flex-wrap: wrap; gap: 0.5rem;。每个标签自行调整大小，容器处理排列。在过滤 UI、内容标记、搜索界面中大量使用。与 :has() 选择器结合用于状态相关的样式。

常见陷阱及其含义

• min-width: auto 陷阱。Flex 项目有一个隐式的 min-width: auto（或 column 方向的 min-height: auto），防止它们缩小到内容的固有最小大小以下。这会导致 overflow: hidden 和文本截断模式在 flex 容器内意外失败。修复：在有问题的 flex 项目上显式设置 min-width: 0。这是「为什么我的 flex 布局坏了？」最常见的原因。
• flex-basis 与 width 混淆。flex-basis 是 flex 项目沿主轴的初始大小，在 grow/shrink 计算之前。width（或 column 方向的 height）是常规 CSS 大小。两者都设置时，flex-basis 获胜。简写 flex: 1 1 200px 将 flex-basis 设置为 200px。在大多数情况下，在 flex 容器内优先使用 flex-basis 而非 width 以求清晰。
• 旧浏览器中的 gap 支持。gap 属性最初仅限 Grid，最近才在 Flexbox 中到达：Safari 14.1（2021 年 4 月），Chrome/Firefox 更早。对于支持旧 Safari（或 iOS 应用中旧 WebView）的项目，使用子级上的外边距提供后备。大多数现代项目可以安全使用 gap；检查你的具体浏览器支持目标。
• 默认 flex-shrink 可能导致意外大小调整。Flex 项目默认为 flex-shrink: 1，意味着如果容器太窄，它们可以缩小到声明的宽度以下。要使元素无论可用空间如何都保持其声明的宽度，设置 flex-shrink: 0。常见于侧栏应保持 250px 宽，即使主内容区域推动它们时：使用 flex: 0 0 250px 而不是 flex-basis: 250px。
• 百分比 flex-basis 相对于容器。flex-basis: 50% 意味着「flex 容器主轴大小的 50%」。这对典型布局有效，但与 flex-wrap 交互奇怪：如果容器本身在嵌套 flex 上下文中具有基于百分比的主轴大小，数学复合。如有疑问，对 flex-basis 使用像素值或 min()/max()/clamp() 而非百分比。
• IE 11 Flexbox 有 bug 边缘情况。Internet Explorer 11（2022 年 6 月退役）实现的 Flexbox 有几个 bug：min-height 不被尊重、嵌套 flex 容器断开、flex: 1 有时将 flex-basis 视为 0px 而非 0%、「双值 flex」简写处理不一致。对于不再支持 IE 的项目，忽略。对于遗留企业软件，仔细测试或使用替代布局方法。

隐私：一切都在你的浏览器中运行

CSS 学习和布局工具有两种风格：运行客户端 JavaScript 的简单 HTML 页面（私密、快速、无需设置）和带保存项目的云编辑器（协作但有隐私权衡）。这个工具是第一种。你的属性选择、你的项目配置、你生成的 CSS：所有都保留在你的浏览器会话中。刷新页面，状态消失，除非你先复制了 CSS。

这里隐私利害关系较低，因为 Flexbox 配置很少包含敏感信息。尽管如此，缺乏分析很重要：你可以自由实验，而不必记录你的试错过程。在课堂或企业培训环境中特别有用，让学生或受训者在第三方平台上注册账户是一个摩擦点。该工具是一个没有后端的单一静态页面，可在任何浏览器中使用，包括锁定的企业机器。

什么时候另一个工具是正确选择

• 二维布局的 CSS Grid。Flexbox 是一维的；如果你需要同时在行和列对齐项目（例如，带混合大小卡片的杂志风格布局），CSS Grid 显然更适合。使用我们的 CSS Grid Generator 进行此类工作。两者很好地协同工作：Grid 用于页面级结构，Flexbox 用于组件内部排列。
• 表格数据的 HTML 表格。如果你的数据实际上是表格（行代表记录，列代表字段），使用真正的 <table> 元素加 <tr> 和 <td>。表格为屏幕阅读器提供语义意义、可排序标题和内置对齐。Flexbox/Grid 用于表格是 2010 年代的反模式；现代可访问性指南明确推荐表格数据使用语义 HTML 表格。
• 覆盖和工具提示的 position: absolute。模态覆盖、工具提示、下拉菜单和类似的浮动 UI 元素最好使用 position: absolute 或 position: fixed 而非 Flexbox。Flex/Grid 管理布局流；绝对定位完全将元素从流中提取。组合它们：Flexbox 用于主页面布局，绝对定位用于覆盖它的模态。
• 嵌套对齐的 CSS Subgrid。当嵌套布局需要与父级的网格对齐时（例如，卡片标题在卡片网格中全部对齐），CSS Subgrid（Firefox 71 2019、Chrome 117 2023、Safari 16 2022）比嵌套 Flexbox 更合适。Subgrid 让子级从父级继承网格轨道，确保跨嵌套结构的完美对齐。值得为设计系统组件工作学习。

更多常见问题

flex 简写究竟意味着什么？

flex 简写一次设置三个属性：flex: <grow> <shrink> <basis>。常见值：flex: 1（1, 1, 0%）用于等分配项目，flex: 0 0 auto 用于固定大小项目，flex: 1 1 250px 用于从 250px 起点生长/缩小的项目。当只提供一个或两个值时，简写具有特殊的初始值；显式三值形式避免意外。

如何让项目换行到多行？

在容器上设置 flex-wrap: wrap。当项目无法适应时溢出到新行。结合项目上的 flex-basis 控制每行适合多少：flex: 1 1 200px 创建一个响应式网格，其中项目至少 200px，生长以填充剩余空间，并在窄屏上换行到新行。容器 gap 属性处理换行的行和项目之间的间距。

我可以反转 flex 项目的顺序吗？

可以，多种方式。容器级：flex-direction: row-reverse（或 column-reverse）反转所有项目的顺序。项目级：order 属性分配数字权重；数字较低的项目先出现。默认顺序为 0；在一个项目上设置 order: -1 将其移到前面。可访问性说明：视觉重新排序不影响 Tab 顺序或屏幕阅读器读取顺序，这可能让键盘和辅助技术用户感到困惑。谨慎使用。

align-items 和 align-content 有什么区别？

align-items 沿交叉轴在其行（或列）内对齐项目。align-content 在容器内对齐行（或列）本身，仅当有多个换行的行时才有意义。如果 flex-wrap 设置为 nowrap（默认），align-content 没有效果，因为只有一行。单行对齐使用 align-items，多行对齐使用 align-content。

如何用 Flexbox 居中单个元素？

经典答案：父容器使用 display: flex; justify-content: center; align-items: center;。这将子元素水平和垂直居中。仅水平：仅使用 justify-content: center。仅垂直：仅使用 align-items: center。如果需要在未知高度的父级内居中，向父级添加 min-height: 100vh，使其有垂直空间居中。整个模式替代了 20 年的 CSS 居中变通方法。

为什么我的文本截断在 flex 容器中不起作用？

因为 flex 项目上的 min-width: auto 默认值。Text-overflow: ellipsis 需要元素实际溢出其容器；默认最小宽度设置为内容的固有大小时，元素永远不会溢出。修复：向包含截断文本的 flex 项目添加 min-width: 0。这是最常见的 Flexbox bug Stack Overflow 答案：搜索「flex text-overflow ellipsis not working」返回成千上万个版本的这个确切答案。