CSS Flexbox 演练场
交互式 CSS Flexbox 演练场，提供实时视觉预览、单个项目控制、真实布局预设（圣杯布局、卡片网格、导航栏、模态框）以及一键 CSS 导出。通过实时实验学习 flex-direction、justify-content、align-items、gap 等属性。
检测到广告拦截，导致我们无法展示广告
MiniWebtool 依靠广告收入免费提供服务。如果这个工具帮到了你，欢迎开通 Premium（无广告 + 更快），或将 MiniWebtool.com 加入白名单后刷新页面。
- 或升级 Premium（无广告）
- 允许 MiniWebtool.com 显示广告，然后刷新
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 擅长于你只需要在单一方向控制对齐的简单排列。
如何使用此演练场
- 选择预设（可选）：选择圣杯布局、卡片网格、导航栏、英雄区、模态框或粘性页脚来加载真实世界的起点。每个预设都是一个完整的、可工作的布局，供你学习或修改。
- 调整容器属性：使用右侧面板中的分段控制按钮设置
flex-direction、flex-wrap、justify-content、align-items、align-content和gap。视觉舞台会立即更新。 - 编辑单个项目：点击预览中的任何项目将其选中。你可以独立于其他项目覆盖其
order、flex-grow、flex-shrink、flex-basis和align-self。具有覆盖属性的项目会标记有小图标。 - 添加或删除项目：使用“添加项目”和“删除选中项”来更改项目数量，并观察布局的响应。
- 复制代码：底部的“生成代码”部分始终反映你当前的布局。点击一下即可复制 CSS、HTML 或两者。
容器属性参考
Flex 容器是设置了 display: flex 的父元素。这些属性控制其所有子元素的共同行为。
| 属性 | 值 | 作用 |
|---|---|---|
flex-direction |
row · row-reverse · column · column-reverse |
设置主轴方向。row 从左到右排列（默认）；column 垂直堆叠。 |
flex-wrap |
nowrap · wrap · wrap-reverse |
控制当空间不足时项目是保持在一行还是换行到多行。 |
justify-content |
flex-start · center · flex-end · space-between · space-around · space-evenly |
沿主轴对齐项目。将剩余空间分配到两侧或项目之间。 |
align-items |
stretch · flex-start · center · flex-end · baseline |
沿交叉轴（垂直于主轴）对齐项目。 |
align-content |
stretch · flex-start · center · flex-end · space-between · space-around |
沿交叉轴对齐换行后的行。仅在项目换行到多行时生效。 |
gap |
长度，例如 8px, 1rem |
设置 Flex 项目之间的间距。取代了旧的基于 margin 的间距模式。 |
项目属性参考
这些属性应用于单个 Flex 项目（Flex 容器的子元素），并仅为该项目覆盖容器的默认设置。
| 属性 | 值 | 作用 |
|---|---|---|
order |
整数（默认为 0） |
在不改变 HTML 的情况下视觉上重新排列项目。数值越小越先渲染；负值将项目移到开头。 |
flex-grow |
数字（默认为 0） |
定义该项目相对于兄弟项目应吸收容器多少剩余空间。所有项目设为 1 则平分空间。 |
flex-shrink |
数字（默认为 1） |
定义当空间不足时项目缩小的比例。0 表示永不缩小——项目保持其声明的大小。 |
flex-basis |
auto · 长度 · 百分比 |
在分配剩余空间之前设置项目的初始大小。实际上设置了项目的“理想”主轴尺寸。 |
align-self |
auto · 与 align-items 相同 |
为单个项目覆盖容器的 align-items 设置。 |
justify-content 和 align-items 之间有什么区别？
justify-content 控制沿 主轴 的对齐，而 align-items 控制沿 交叉轴 的对齐。主轴是由 flex-direction 设置的方向——row 为水平，column 为垂直。当你将 flex-direction 从 row 更改为 column 时，两个轴会交换，因此 justify-content 变为垂直，而 align-items 变为水平。这种交换是学习 Flexbox 时最常见的困惑来源；预览下方的演练场轴指示器有助于使其直观可见。
如何使用 Flexbox 居中元素？
要水平和垂直居中单个元素：
display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
这是涉及 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 Flexbox 演练场" 于 https://MiniWebtool.com/zh-cn/css-flexbox-演练场/，来自 MiniWebtool，https://MiniWebtool.com/
由 miniwebtool 团队开发。更新日期：2026年4月25日
其他相关工具:
网站管理工具:
- 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 演练场 新