可视化调整 Flexbox 属性 · 实时预览 · 一键生成生产级 CSS 代码
Flexbox（弹性盒子）是CSS3提供的一种高效布局方式，特别适合响应式设计、组件对齐、未知尺寸元素排列。ng.cc提供的在线Flexbox布局生成器，通过可视化控件调整容器属性（flex-direction/justify-content/align-items等）和项目属性（flex-grow/flex-shrink/order等），实时预览布局效果，并一键生成生产就绪的CSS代码。无需记忆20+个Flex属性，无需反复切换浏览器与编辑器。
覆盖6个容器属性、5个项目属性，包括gap、align-content、order等高级特性。拖拽滑块、下拉选择，所见即所得。
完美居中、等宽网格、固定侧边栏、上中下布局、卡片列表、圣杯布局。一键应用，快速原型设计。
调整任何属性，右侧CSS代码同步更新。包含容器和项目完整样式，可直接复制到项目中使用。
支持添加/移除Flex项目（最多6个），模拟真实开发场景，验证不同数量元素的布局表现。
| 属性 | 可选值 | 作用 |
|---|---|---|
flex-direction | row, row-reverse, column, column-reverse | 定义主轴方向，决定项目的排列方向 |
flex-wrap | nowrap, wrap, wrap-reverse | 定义项目是否换行 |
justify-content | flex-start, flex-end, center, space-between, space-around, space-evenly | 主轴上的对齐方式 |
align-items | stretch, flex-start, flex-end, center, baseline | 交叉轴单行对齐方式 |
align-content | stretch, flex-start, flex-end, center, space-between, space-around | 交叉轴多行对齐方式（需flex-wrap:wrap） |
gap | 长度值 | 项目之间的间距 |
| 属性 | 可选值 | 作用 |
|---|---|---|
flex-grow | 数字（默认0） | 定义项目的放大比例，剩余空间按比例分配 |
flex-shrink | 数字（默认1） | 定义项目的缩小比例，空间不足时按比例收缩 |
flex-basis | auto, 长度值, 百分比 | 定义在分配多余空间之前，项目占据的主轴空间 |
align-self | auto, flex-start, flex-end, center, stretch | 允许单个项目有与其他项目不一样的对齐方式 |
order | 整数（默认0） | 定义项目的排列顺序，数值越小越靠前 |
justify-content: center; align-items: center; —— 同时实现水平和垂直居中，经典模态框方案。flex-wrap: wrap; flex-grow: 1; —— 项目平均分配容器宽度，适合图片画廊、卡片列表。flex-grow:1自适应，经典管理后台布局。flex-direction: column; 头部、内容区、底部固定高度，内容区自适应。flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 的缩写。表示项目会平均分配剩余空间，是最常用的自适应写法。您可以在本工具的「flex-grow」滑块设置为1，flex-basis选择「0」，观察效果。
align-content 只在 **多行** 情况下生效，且容器必须设置 flex-wrap: wrap 且有多行项目。如果只有一行，请使用 align-items。本工具中，您可以先设置flex-wrap为wrap，然后添加足够多的项目使其换行，再调整align-content观察效果。
margin-left: auto （本工具暂未实现，但可以在生成的CSS中手动添加）。justify-content: space-between 并在第一个项目前插入空元素。本工具是ng.cc开发者工具箱设计工具系列的一员，您可能还需要：
⚡ 所有工具均在浏览器本地运行，不存储任何用户数据，可放心用于商业项目。