CSS Flexbox 演练场

CSS Flexbox 演练场

CSS Flexbox 演练场是一个用于现代 CSS 弹性盒子布局模块的交互式学习环境和代码生成器。通过调整容器属性（flex-direction、justify-content、align-items、gap）和单项属性（flex-grow、flex-shrink、flex-basis、align-self、order），你可以实时观察布局的变化。当你调整到满意的效果时，可以直接复制 ready-to-paste（即插即用）的 CSS 和 HTML 到你的项目中。

什么是 CSS Flexbox？

CSS Flexbox（弹性盒子布局）是一种一维布局模型，旨在沿单个轴（行或列）分配空间并对齐容器内的项目。它取代了以往用于导航栏、卡片行、内容居中以及任何需要元素自然适应容器的 UI 所使用的浮动（floats）和 inline-block 等旧技术。与二维的 CSS Grid 不同，Flexbox 擅长于你只需要在单一方向控制对齐的简单排列。

如何使用此演练场

1. 选择预设（可选）：选择圣杯布局、卡片网格、导航栏、英雄区、模态框或粘性页脚来加载真实世界的起点。每个预设都是一个完整的、可工作的布局，供你学习或修改。
2. 调整容器属性：使用右侧面板中的分段控制按钮设置 flex-direction、flex-wrap、justify-content、align-items、align-content 和 gap。视觉舞台会立即更新。
3. 编辑单个项目：点击预览中的任何项目将其选中。你可以独立于其他项目覆盖其 order、flex-grow、flex-shrink、flex-basis 和 align-self。具有覆盖属性的项目会标记有小图标。
4. 添加或删除项目：使用“添加项目”和“删除选中项”来更改项目数量，并观察布局的响应。
5. 复制代码：底部的“生成代码”部分始终反映你当前的布局。点击一下即可复制 CSS、HTML 或两者。

容器属性参考

Flex 容器是设置了 display: flex 的父元素。这些属性控制其所有子元素的共同行为。

项目属性参考

这些属性应用于单个 Flex 项目（Flex 容器的子元素），并仅为该项目覆盖容器的默认设置。

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

justify-content 控制沿 主轴 的对齐，而 align-items 控制沿 交叉轴 的对齐。主轴是由 flex-direction 设置的方向——row 为水平，column 为垂直。当你将 flex-direction 从 row 更改为 column 时，两个轴会交换，因此 justify-content 变为垂直，而 align-items 变为水平。这种交换是学习 Flexbox 时最常见的困惑来源；预览下方的演练场轴指示器有助于使其直观可见。

如何使用 Flexbox 居中元素？

要水平和垂直居中单个元素：

这是涉及 margin: auto、transform: translate(-50%, -50%) 或 position: absolute 等旧居中技巧的现代替代方案。通过选择“模态框居中”预设在演练场中尝试。

真实世界布局预设详解

圣杯布局

经典的三栏页面布局：左侧栏、主内容、右侧栏——带有页眉和页脚。历史上使用浮动很难构建；Flexbox 让它变得轻而易举。中间栏使用 flex: 1，因此它吸收了所有剩余的水平空间，而侧边栏保持在其声明的宽度。

卡片网格

随着视口缩小而流向新行的换行卡片行。使用 flex-wrap: wrap，每个卡片设置 flex: 1 1 240px，意味着卡片会增长和缩小，但永远不会窄于 240px。

导航栏

一个水平导航栏，左侧是 Logo，右侧是链接。窍门是使用 justify-content: space-between，将 Logo 和链接组作为两个子元素，链接组内部再设置一个 Flex 容器。

英雄区（Hero Section）

内容在水平和垂直方向上居中的垂直堆叠——非常适合着陆页的英雄区域。在较高的容器上使用 flex-direction: column、justify-content: center 和 align-items: center。

模态框居中

一个模态对话框在其遮罩层内完美居中。应用上面显示的相同三行居中配方到全屏遮罩容器上。

粘性页脚

当内容较少时页脚位于视口底部，而内容较长时页脚会被向下推。通过给 body 设置 display: flex; flex-direction: column; min-height: 100vh 且主内容设置 flex: 1 来实现。

flex-grow、flex-shrink 和 flex-basis 之间有什么区别？

这三个属性（合并为简写 flex）描述了项目如何处理空间：

• flex-basis 在分配任何剩余空间之前设置项目的 理想 大小。可以将其视为项目的“起点”。
• flex-grow 表示“如果有剩余空间，就拿走这一份”。值为 0 表示拒绝增长；1 表示按比例增长；2 表示拿走两倍于设置为 1 的项目的份额。
• flex-shrink 表示“如果空间不足，就按这个比例缩小”。默认值为 1（按比例缩小）；0 表示拒绝缩小。

简写 flex: 1 展开为 flex: 1 1 0%——等比例增长、等比例缩小、零基准值——这意味着所有项目都将平分容器空间，无论其内容如何。flex: auto 展开为 flex: 1 1 auto，这会将内容大小作为基准值。

什么时候应该使用 Flexbox vs Grid？

对于项目在单个方向流动的单一维度布局——如一排按钮、导航栏、单列卡片，请使用 Flexbox。Flexbox 是内容感知的，当你希望项目根据自身大小调整时，它是绝佳选择。

对于需要同时控制行和列的双维度布局——如全页布局、图片库、仪表板，请使用 CSS Grid。Grid 是布局感知的，允许你将项目放入命名的轨道中。

两者是互补的，而不是竞争关系。许多实际设计会将它们结合：使用 Grid 进行页面整体布局，内部包含 Flexbox 导航栏和卡片行。

掌握 Flexbox 的技巧

• 视觉化坐标轴。 始终明确哪个方向是“主轴”，哪个是“交叉轴”——演练场的轴指示器让这一点变得明确。
• 使用 gap 而非外边距。 现代浏览器已全面支持 Flex 容器上的 gap，它消除了在最后一个子元素上使用别扭的 margin 技巧的需要。
• 善用 flex: 1。 当你希望项目等分空间时，这个简写属性几乎总是你想要的。
• 在 Flex 项目上使用 min-width: 0。 项目具有基于其内容的隐式最小宽度。如果长的不可折行字符串（如 URL）使你的布局溢出，请在项目上设置 min-width: 0 以覆盖此行为。
• 避免仅使用百分比宽度。 将百分比宽度与 flex-grow 混合使用可能会产生意想不到的结果。首选 flex-basis 并设置合理的默认值。

浏览器支持和兼容性

CSS Flexbox 在所有现代浏览器中都得到支持，包括 Chrome, Firefox, Safari, Edge 以及所有主流移动端浏览器。Flex 容器中的 gap 属性已在 2021 年达到了通用浏览器支持。较旧的遗留浏览器 (IE10/11) 需要供应商前缀且存在几个记录在案的 Bug；针对这些受众，请参考 flexbugs。

常见问题解答

为什么我的 Flex 项目溢出了容器？

Flex 项目具有基于其内容的隐式 min-width: auto。长单词、代码块或预格式化文本可能会强制项目宽度超过容器。通过在项目上设置 min-width: 0（或者在列布局中设置 min-height: 0）来修复此问题。

space-between, space-around 和 space-evenly 之间有什么区别？

space-between 在两端不留空隙，项目之间平分空间。space-around 在两端留出半个间隙，项目之间留出完整间隙。space-evenly 在两端和项目之间都留出相等的间隙。在演练场中切换它们以感受不同。

我可以为 Flex 属性设置动画吗？

可以。flex-grow, flex-shrink, flex-basis, order 和 gap 都可以设置过渡动画。不支持为 flex-direction, justify-content 和 align-items 设置动画，因为它们是离散的枚举属性。

演练场可以在离线状态下工作吗？

所有的 Flexbox 计算都在你的浏览器中使用原生 CSS 完成。页面加载完成后，你可以在没有互联网连接的情况下使用演练场——没有任何 API 调用或服务器端计算。

生成的代码可以用于生产环境吗？

可以。导出的 CSS 使用所有常青浏览器都支持的标准属性。HTML 使用语义化的类名（flex-container, flex-item），你可以根据项目的约定对它们进行重命名。

额外资源

• CSS 弹性盒子布局 - MDN
• CSS 弹性盒子布局模块第 1 级 - W3C 规范
• CSS Flex Box 布局 - 维基百科

其他相关工具:

网站管理工具:

• CPC计算器
• cpm计算器 精选
• CSS压缩器
• 网站图标生成器
• 谷歌的adsense计算器
• cron作业生成器
• crontab表达式生成器
• html压缩器
• HTML 到文本转换器
• 关键词密度检查器
• markdown表格生成器
• 元标记生成器
• 智能引号删除工具
• URL Slug 生成器
• 页面价值计算器
• 访客价值计算器
• unix权限计算器
• html实体编码解码器
• Lorem Ipsum生成器
• JSON字符串转义反转义
• cURL转JSON转换器
• SQL格式化工具
• SVG优化器
• .htaccess 重定向生成计算器
• Googlebot抓取大小检测器
• robots.txt生成器 新
• XML网站地图生成器 新
• 域名年龄查询器 新
• Open Graph检测器 新
• WHOIS查询 新
• DNS查询 新
• 页面速度检查器 新
• 域名信任度检查器 新
• 重定向检查器 新
• Hreflang 标签生成器 新
• 死链检查器 新
• CSS Flexbox 演练场 新
• CSS Grid 生成器 新
• Git 命令生成器 新
• .env 文件生成器 新
• cURL命令构建器 新
• HTTP状态码参考 新
• URL解析器 新
• 查询字符串生成器 新
• SVG 转 React/JSX 转换器 新
• SCSS转CSS编译器 新
• Less 到 CSS 编译器 新
• TypeScript 在线演练场 新
• JSON Schema 生成器 新