Web

Flexbox 生成器

可视化调节 Flex 布局并导出 CSS。

工作区本地处理

directionjustify-contentalign-itemsflex-wrapgap 12px

A

B

C

D

生成的 CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

数据不会离开你的设备，不会被上传或存储。

常见问题

关于工具用途、用法与隐私说明

Flexbox 生成器面向前端与网页开发，在浏览器本地处理 HTML、CSS、JS 与布局调试。