CSS Flexbox 生成器

容器属性

Item 属性

flex: 1 小技巧

flex: 1 是 flex: 1 1 0% 的缩写。它让 item：

• 增长以填满可用空间（grow: 1）
• 必要时收缩（shrink: 1）
• 从 0 尺寸开始（basis: 0%）

要做等宽列，对每个 item 用 flex: 1 就能完美平分。对不应收缩到内容以下的侧栏，用 flex: 0 0 240px（不增长、不收缩、240px 起始）。

常见模式

居中英雄区

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Logo 在左、链接在右的导航栏

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* 推到右边 */
  display: flex;
  gap: 1rem;
}

响应式卡片行

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* 增长/收缩，260px 起最小宽度，再窄就换行 */
}

输入 + 按钮（输入弹性，按钮固定）

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs Grid

• Flexbox：一个维度（行或列）。在 item 尺寸由内容驱动，或沿单一方向分配空间时最适用。
• Grid：两个维度（带显式轨道的行和列）。布局同时具有行和列结构时最适用。

导航栏或一摞卡片：Flexbox。多行对齐的产品卡片网格：CSS Grid。许多真实页面两者都用，页面用 Grid，组件内部用 Flexbox。

常见坑

• item 不填满容器：默认 align-items: stretch 只在 item 没有固定高度时生效。设了显式高度它就保持那个尺寸。
• gap 不生效：检查浏览器支持。Flex gap 进来得晚；Safari <14.1 不支持。2024+ 已经普遍。
• column flex 的子元素塌缩：flex column 默认 align-items: stretch，会把 item 拉伸到容器宽度。如果某个子元素设置了 width，它会突破出来。
• order 仅视觉：屏幕阅读器和键盘导航跟随 DOM 顺序。不要用 order 让内容讲得通；只用于视觉打磨。