CSS Flexbox 生成器 | 在线开发者工具

容器

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

点击项目以选择它

点击项目以选择并配置其 flex 属性。

什么是 CSS Flexbox？

CSS Flexbox（弹性盒子布局）是一种一维布局模型，用于在行或列中分配空间并对齐项目。flex 容器通过 display: flex 定义，其直接子元素成为 flex 项目。容器的关键属性：flex-direction（行或列）、flex-wrap（单行与多行）、justify-content（主轴对齐）、align-items（每行的交叉轴对齐）和 align-content（多行的交叉轴对齐）。项目的关键属性：flex-grow（项目的拉伸比例）、flex-shrink（收缩比例）、flex-basis（初始尺寸）和 align-self（覆盖容器的 align-items，针对特定项目）。Flexbox 非常适合导航栏、卡片行、居中布局及任何一维排列。

如何使用 CSS Flexbox 生成器

使用下拉菜单和输入框调整容器属性（flex-direction、flex-wrap、justify-content、align-items、align-content、gap）。
在预览中点击任意项目以选择它（变为橙色）。
在项目面板中设置所选项目的 flex-grow、flex-shrink、flex-basis 和 align-self。
点击「+ 添加项目」以添加更多项目；点击「移除」以删除所选项目。
在 CSS 和 HTML 选项卡之间切换以查看生成的代码，然后点击复制。
点击「重置全部」以使用默认的 3 项目布局重新开始。