CSS Flexbox 生成器

生成的规则里有什么

生成器输出一条 .container 规则，固定七条声明：display: flex、flex-direction、flex-wrap、justify-content、align-items、align-content 和 gap。粘贴到样式表后，把 .container 换成你自己的类名即可。每个属性都会写出来，即使是默认值，用不到的行可以直接删掉。

下拉框默认就是 CSS 初始值：row、nowrap，justify-content、align-items、align-content 为 normal。在弹性容器里，normal 在交叉轴上拉伸子项与换行后的各行，在主轴上从起点排列（CSS Box Alignment Level 3），所以这三行与不写效果相同。gap: 1rem 不一样：弹性容器的 gap 初始值是 normal，即 0，默认规则会在子项之间加 1rem 的间距，不需要就删掉这一行。默认输出如下：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
  gap: 1rem;
}

这条规则只作用于容器，子项上的 flex、order、align-self 都要自己补写。

示例一：移动端底部标签栏

手机页面底部常见“首页、分类、购物车、我的”四个标签。保持 row 和 nowrap，展开“对齐设置”，justify-content 选 space-around，align-items 选 center，间距填 0：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: normal;
  gap: 0;
}

按对齐规则计算：容器宽 360px、四个标签各 60px 时，剩余空间是 120px。space-around 给每个标签两侧各留一半，四个标签的左边缘依次在 15、105、195、285px，两端只留 15px，标签之间是 30px。如果希望两端和中间的空隙一样大，改选 space-evenly，左边缘变成 24、108、192、276px，所有空隙都是 24px。align-items: center 让图标和文字高度不同的标签在竖直方向居中。

示例二：商品筛选标签自动换行

筛选栏里的“包邮”“满 300 减 40”“次日达”“七天无理由退货”这类标签，数量多时要能换到下一行。把 flex-wrap 改为 wrap，align-items 选 center，间距填 8px：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: center;
  align-content: normal;
  gap: 8px;
}

换行时，浏览器按每个标签不换行时的宽度把它们分到各行，放不下的整个移到下一行，所以标签内部的文字一般不会被拆开。只有一个标签本身比容器还宽时，才会在标签里面折行。gap: 8px 一个值同时设置行间距和列间距；想让行距大一些，可以写两个值，如 12px 8px（先行后列）。

nowrap 时中文标签会被压成一字一行

如果不开换行，空间不够时子项会收缩。弹性子项默认的最小宽度是 auto，按 CSS Flexbox Level 1 的规定，它等于内容能缩到的最小宽度。英文只能在单词之间断行，最小宽度是最长单词的宽度；中文几乎可以在任意两个字之间断行，最小宽度只有一个字。结果是，一行里放着一个固定宽度的元素和一个中文标签时，空间一紧，标签就会变成一字一行的竖条。

解决办法要看你希望谁让步：要让标签保持一行，在标签上加 flex-shrink: 0 或 white-space: nowrap，再让旁边的元素可以收缩；如果旁边也是固定宽度，内容就会超出容器。这类属性写在子项上，工具不生成，需要复制后自己补写。

限制

• 只生成容器规则。flex-grow、flex-shrink、flex-basis、order、align-self 都没有控件。
• justify-content 没有 stretch 和 start / end，align-content 没有 space-evenly，需要时在复制后的 CSS 里手动改。
• 间距输入框不校验，无效值会照原样复制，浏览器会丢弃这条声明。
• 预览子项数量为 1–8。
• row-reverse 和 column-reverse 只改变显示顺序，键盘焦点和读屏软件仍按 HTML 顺序。

需要同时控制行和列时，用 CSS Grid 生成器。

Flexbox 与 Grid 的区别

一维布局（沿单行或单列排列子项）用 Flexbox；需要同时控制行和列的二维布局用 CSS Grid。实践中，Flexbox 擅长组件级布局（导航、按钮组、表单行），Grid 更适合页面级结构。