CSS flexbox 生成器

CSS flexbox 生成器: 用途

Flexbox 是 CSS 中在一行或一列里对齐项目最常用的方式，但属性名称常常让初学者困惑。

在这里，你通过选择器更改每个选项，项目会立即移动：方向、换行、主轴上的分布、交叉轴上的对齐、align-content 以及项目间距。代码只显示相对默认值改动过的部分，并在某个属性在其他选择下不起作用时提示你。

使用方法

1. 选择方向、对齐和换行选项。
2. 调整 gap、项目数量以及会伸展的项目。
3. 复制容器的 CSS。

使用场景

• 让元素在屏幕上居中。
• 搭建菜单或一行按钮。
• 在实践中学习 flexbox。

常见问题

justify-content 和 align-items 有什么区别？

justify-content 在主轴上分布项目（方向为 row 时是水平方向），align-items 在交叉轴上对齐（同样情况下是垂直方向）。如果把方向改为 column，两者的轴会互换。

什么时候用 flexbox，什么时候用 grid？

Flexbox 用于一维：一行按钮、一个菜单、随空间自动调整的项目。Grid 用于同时处理两个维度，比如相册或页面布局。两者也可以一起使用。

gap 有什么用？

在项目之间加间距，而不会在边缘产生外边距，这在以前需要使用 margin 和 :last-child 之类的选择器。它在当前所有浏览器中都可用于 flexbox。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具