CSS Flexbox 生成器
在您的浏览器中本地运行可视化构建 Flexbox 布局并复制 CSS、HTML 或 Tailwind
实时预览
主轴 →
交叉轴 ↓
主轴 → · 交叉轴 ↓ · row / nowrap
斜线区域表示 gap 间距: 行间距 12px · 列间距 12px
源 = 在 HTML 中的位置。order = CSS order，仅改变视觉排列。
3/24 · 最多 24 个项目。
辅助线显示轴线、源顺序位置、CSS order 和 gap 间距，不会被导出。
生成的代码
.flex-container 是容器规则；.flex-item-N 是第 N 个项目的规则。 当前选中项目：.flex-item-1
/* Sample box styles that match the preview */
.flex-container {
box-sizing: border-box;
padding: 12px;
border-width: 1px;
border-style: dashed;
border-color: #94a3b8;
border-radius: 8px;
}
.flex-item {
box-sizing: border-box;
margin: 0;
padding: 12px 16px;
border-width: 2px;
border-style: solid;
font-size: 14px;
line-height: 20px;
border-color: #6366f1;
border-radius: 6px;
background: #eef2ff;
color: #1e1b4b;
}
/* Flexbox layout */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
width: 100%;
height: 220px;
}
.flex-item.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
编辑时代码实时更新。
完全在浏览器本地运行。布局设置可能保存在此设备的浏览器存储中。
CSS Flexbox 生成器
可视化构建 Flexbox 布局，并复制可用于生产的 CSS、HTML 或 Tailwind 类名。
使用方法
选择预设或调整容器。点击或用键盘选择项目来编辑 flex-grow、flex-shrink、flex-basis、order 和 align-self。添加、删除和重新排序项目，然后复制或下载 CSS、HTML + CSS 或 Tailwind。
可视化学习辅助
辅助线根据当前方向和换行绘制主轴与交叉轴，为每个项目标注源位置和 CSS order，并用斜线标出项目与行之间的 gap 间距。
限制与隐私
最多 24 个项目。长度接受非负的 px、rem、em、%、vw 和 vh 值；不接受 calc() 和自定义 CSS。预览假定为水平、从左到右的书写模式。所有处理都在浏览器中完成，设置可能保存在本地存储中。
