CSS Flexbox 生成器

以可视化方式选择 Flexbox 容器的属性(方向、对齐、间距、换行),即时获取对应的 CSS 代码及实时预览。

示例:

flex-direction

justify-content

align-items

gap(px)

flex-wrap

工作原理

Flexbox 是最常用于沿单一轴(行或列)对齐元素的 CSS 布局系统。该工具让您无需记忆 justify-content 或 align-items 的确切取值:调整下拉菜单,即可直接将生成的 CSS 代码块复制到您的样式表中。

justify-content 沿主轴(由 flex-direction 定义)对齐元素,而 align-items 则沿交叉轴(次轴)对齐元素。

当您希望元素在容器宽度容纳不下时自动换到下一行,而不是被压缩或溢出时,应启用它。

100% 本地处理:代码完全在您的浏览器中通过 WebAssembly 生成。