📐 CSS Flexbox 演练场

关于 CSS Flexbox 演练场

这个 flexbox 演练场完全在你的浏览器中运行。调整容器属性（flex-direction、justify-content、align-items、flex-wrap、align-content）和项目数量，实时查看弹性布局效果。将生成的 CSS 代码复制到你的项目中。

Flexbox 属性详解

• flex-direction —— 定义主轴方向：row（从左到右）、column（从上到下）或它们的反向。
• justify-content —— 沿主轴对齐项目。控制间距和分布。
• align-items —— 沿交叉轴对齐项目。控制项目如何填充垂直空间。
• flex-wrap —— 项目是否换行到多行或保持在一行。
• align-content —— 当交叉轴有额外空间时对齐多行内容。仅在启用 flex-wrap 时生效。

如何使用演练场

1. 使用数字输入框设置 flex 项目数量。
2. 更改任意下拉选择以应用 flexbox 属性。
3. 查看演练场实时更新。
4. 点击复制 CSS复制生成的代码。

常见问题

justify-content 和 align-items 有什么区别？ justify-content 作用于主轴（由 flex-direction 定义），而 align-items 作用于交叉轴（垂直于主轴）。

为什么 align-content 似乎不起作用？ align-content 仅在 flex-wrap 设为 wrap 或 wrap-reverse 且存在多行时才有效果。

可以单独设置项目样式吗？ 本演练场专注于容器属性。在你自己的代码中，可以为单个项目设置 flex-grow、flex-shrink 和 flex-basis。