适用人群
- 学习Flexbox对齐的开发者
- 排列工具栏或卡片的设计师
Developer Layout Utility
Flexbox布局练习
可实时测试 justify-content、align-items、flex-direction、flex-wrap、gap、align-content 等属性，并立即生成 CSS 代码的 Flexbox 布局工具。
实时 Flexbox 预览
修改属性时，项目的对齐方式、方向、换行和间距会立即反映在预览中。
自动生成 CSS
根据当前 Flexbox 设置，自动生成容器和项目的 CSS 代码。
布局学习工具
可以直观理解 justify-content、align-items、align-content 之间的区别。
Flexbox 设置
设置 Flex 容器的方向、对齐方式、换行、间距和项目尺寸。
快速预设
可立即应用常用的 Flexbox 布局模式。
0px
16px
60px
0px
24px
60px
2
5
16
240px
420px
700px
60px
92px
220px
60px
86px
180px
0px
20px
40px
Live Preview
Direction
row
Gap
16px
Wrap
nowrap
生成结果
根据当前 Flexbox 设置生成的 CSS 代码。
请先调整 Flexbox 设置，然后点击生成 CSS 代码按钮。
Flexbox 对齐方式比较
理解方向和轴的概念后，可以更快速地制作按钮组、卡片列表和导航布局。
justify-content
控制主轴方向上的对齐方式。在 row 中负责横向对齐，在 column 中负责纵向对齐。
align-items
控制交叉轴方向上的对齐方式。可将项目放置在起点、居中、终点，或使用 stretch 拉伸。
align-content
当 flex-wrap 产生多行时，用于控制多行整体在交叉轴方向上的对齐。
先理解Flexbox主轴和交叉轴，再复制布局
通过实时预览比较方向、对齐、换行和间距。输出同时包含容器规则和示例子项尺寸。
使用场景
- 居中显示空状态内容。
- 比较多行换行与对齐效果。
从输入到检查结果
- 1
选择主轴方向。
- 2
用justify-content分配主轴剩余空间。
- 3
用align-items设置行内交叉轴对齐。
- 4
开启换行，在多行时比较align-content。
- 5
调整子项尺寸，导出后检查DOM顺序和较长的多语言文本。
居中内容
- 输入
- row；justify-content:center；align-items:center
- 结果
- 有可用空间时，子项在两个轴上居中。
容器的最小高度使纵向对齐可见。
换行卡片
- 输入
- row；wrap；gap 16px
- 结果
- 宽度不足时进入下一行。
具体换行还取决于子项宽度、收缩和内容。
计算与处理原理
将选项应用到容器，并生成CSS。.flex-item的宽度、高度和圆角也会输出，只有子项数量仅用于演示。
限制与注意事项
- 反向排列改变视觉顺序，不会重写DOM顺序。
- align-content需要多条flex行和交叉轴剩余空间。
- 长单词和图片可能与编号方块表现不同。
数据处理
设置在浏览器内处理，不上传到win-j。
参考资料
相关工具
- CSS Grid布局生成器
创建随宽度变化的卡片列表。
- CSS动画生成器
让元素仅淡入一次。
常见问题
align-content为什么没有变化？
nowrap只有一行。请开启换行、增加子项并留出交叉轴空间。
子项尺寸只是预览设置吗？
不是。输出包含宽度、高度和圆角，请根据实际组件修改。
所有布局都适合Flexbox吗？
应根据内容选择。需要同时协调行和列时，Grid可能更方便。