Flexbox 布局生成器
用可视化面板配置 flex 容器和每个项目,布局实时预览,CSS 代码一键复制。
容器
排列方向
换行
主轴对齐
交叉轴对齐
多行对齐
项目 1
单独对齐
布局都在你的浏览器里生成,这里设置的内容不会上传到 BroBroGo。
常见问题
justify-content 和 align-items 有什么区别?
justify-content 沿主轴(项目排列的方向)分配项目,align-items 则控制项目在另一条轴上的位置。把方向从 row 改成 column,两条轴就对调了——justify-content 变成上下方向排列,align-items 变成左右方向对齐。
单个项目的控制项怎么用?
先按编号选中一个项目,再设置它有空间时放大多少、空间紧张时缩小多少、初始尺寸(基准)以及它自己的交叉轴对齐方式。顺序(order)能让项目在画面上提前或靠后,而不用改动 HTML。只有你真正改过的项目,才会在 CSS 里单独生成一条规则。
换行和 align-content 什么时候起作用?
不换行时,所有项目都被挤在一行里,会被压得更窄。开启换行后,放不下的项目会掉到下一行——这时 align-content 才登场,把多行作为一个整体来分配间距。间距(gap)则不用外边距就能设定项目之间、以及行与行之间的空隙。