弹性盒生成器

尝试弯曲方向、环绕、对齐和对齐。观看项目布局实时更新，然后复制容器 CSS。

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

尝试弯曲方向、换行、对齐和对齐 - 查看布局实时更新。
在您的浏览器中运行
免费使用

使用方法

设置弯曲方向和换行。
调整 justify-content 和align-items。
复制 Flexbox CSS。

How this tool works

设置弯曲方向和换行。
调整 justify-content 和align-items。
复制 Flexbox CSS。

Recommended settings

首先使用默认选项，然后根据需要进行调整

Supported formats

Text / on-page input

File size and limits

在旧手机上，非常复杂的多层预览可能会感觉较慢。

Privacy

颜色和 CSS 生成器完全在您的浏览器中运行。预览和转换永远不会上传您的样式。

Common use cases

每当您需要时，都可以使用 Flexbox Generator：尝试弯曲方向、换行、对齐和对齐 - 查看布局实时更新。

Troubleshooting

粘贴后预览看起来有所不同

检查页面上是否存在竞争 CSS（重置、继承颜色）。首先将生成的规则复制到独立的样式表中。

常见问题

这会上传我的 CSS 吗？

不需要。生成器和转换器在您的浏览器中运行并提供实时预览。

我需要一个帐户吗？

不。打开工具，调整控件，然后复制 CSS。