Flexbox 生成器

使用常用模式的预设或直接调整每个属性。输入已限制在安全范围内，以避免无效的 CSS 或空状态渲染错误。

点击任何预览项目可单独编辑。项目特定值在生成代码前也会进行清理。

增长 (flex-grow)

0 1

收缩 (flex-shrink)

0 1

基准 (flex-basis) 单位像素。使用 0 表示基于内容的增长。

自身对齐 (align-self) 为此项目覆盖容器的对齐设置。

实时预览

下方的容器会立即更新。标签总结了哪个轴作为主方向，以便您可以将 CSS 与所见内容联系起来。

主轴：水平。交叉轴：垂直。

CSS 仅包含工具中表示的属性。HTML 标签使用语义化类名，方便将代码段应用到实际组件中。

Flexbox 将 Flex 容器的直接子元素沿主轴和交叉轴排列。以下工具解释了最常见的困惑点，而不涉及过多的专业术语。

row 使主轴变为水平方向，column 使其变为垂直方向。一旦改变，justify-content 和 align-items 看起来就像交换了角色，因为它们始终遵循轴线逻辑，而非屏幕方向。

当 flex-wrap 为 nowrap 时，align-content 没有明显效果。它仅在项目形成多行且行之间有额外空间时才起作用。

flex-grow 控制如何分配剩余空间，flex-shrink 控制项目如何压缩，而 flex-basis 是在协商开始前的起始大小。

说明：生成的基准值使用像素，间距使用整数像素，预览反映了现代浏览器的行为。为了可读性，舍入限制在整数像素值。

在生成器中测试布局后，可将此作为快速查询手册。

沿主轴移动项目。非常适合导航栏、按钮组和分布式行。

一次性控制所有项目的交叉轴对齐。当卡片高度或行内内容不均匀时使用。

覆盖单个项目的交叉轴对齐，而不改变组内其他项目。