Flex 项目属性详解

项目属性总览

写在 Flex 项目（容器直接子元素）上：

属性	作用
order	视觉排序
flex-grow	放大比例
flex-shrink	缩小比例
flex-basis	分配空间前的基准尺寸
flex	grow/shrink/basis 简写
align-self	覆盖容器的 align-items

---

flex-grow

剩余空间如何分配。默认 0（不放大）。

.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; } /* 分到的剩余空间是 A 的两倍 */

注意：按比例分配的是「主轴剩余空间」，不是最终宽度的简单倍数。

---

flex-shrink

空间不足时如何压缩。默认 1（可缩小）。

.no-shrink { flex-shrink: 0; } /* 宁肯溢出也不被压扁 */

缩小权重还与项目基准尺寸有关，不完全是简单整数比。

---

flex-basis

在分配剩余/不足空间之前的主轴基准尺寸。默认 auto。

值	含义
auto	参考 width/height；若无则看内容
0 / 0%	基准为 0，更易实现「按 grow 均分」
200px / 30% 等	明确基准
content	基于内容（支持度需确认）

主轴为 row 时，flex-basis 对应宽度逻辑；column 时对应高度逻辑。

---

flex 简写（强烈推荐）

flex: <grow> <shrink> <basis>;

常见写法

写法	展开	场景
flex: 0 1 auto	默认	按内容，必要时缩小
flex: auto	1 1 auto	可放大可缩小，基准内容
flex: none	0 0 auto	完全固定，不伸缩
flex: 1	1 1 0%（多数引擎）	均分剩余空间
flex: 1 1 0	明确基准 0	等分列更可控

.sidebar { flex: 0 0 240px; } /* 固定侧栏 */
.main    { flex: 1 1 auto; min-width: 0; } /* 主区吃剩余 */

💡 生产代码优先写 flex 简写，并在需要防撑破时配合 min-width: 0（或 min-height: 0）。

---

order

默认 0，可为负数。数值小的排在前面。

.logo  { order: -1; } /* 提到最前 */
.extra { order: 1; }

仅影响视觉顺序，不改变 DOM、读屏与 Tab 顺序。无障碍与 SEO 相关场景应调整 HTML 结构，而不是依赖 order。

---

align-self

单项覆盖容器 align-items。

.item-special {
  align-self: flex-end;
}

取值与 align-items 相同：auto | stretch | flex-start | center | flex-end | baseline 等。

---

margin: auto 技巧

在 Flex 中，margin: auto 会吸收对应方向的剩余空间。

/* 左侧一组，右侧一个推到尽头 */
.nav { display: flex; }
.nav .spacer-right { margin-left: auto; }

/* 垂直方向把某项推到底（column 主轴时） */
.footer-push { margin-top: auto; }

比单独用 justify-content 更灵活，适合「一组左齐 + 单个右齐」。

---

实战片段

固定 + 自适应两栏

.layout {
  display: flex;
  gap: 24px;
}
.aside {
  flex: 0 0 280px;
}
.content {
  flex: 1 1 auto;
  min-width: 0; /* 允许内部预格式文本/表格收缩 */
}

底部操作栏贴底（卡片内）

.card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.card__actions {
  margin-top: auto;
}

不希望被压缩的按钮

.btn {
  flex: 0 0 auto; /* 或 flex-shrink: 0 */
  white-space: nowrap;
}

计算直觉（简化）

1. 先按每个项目的 flex-basis（或内容/width）得到假设主尺寸
2. 若总和 < 容器 → 按 flex-grow 分剩余
3. 若总和 > 容器 → 按 flex-shrink 压缩
4. 再应用对齐（justify/align）与 margin auto

详细算法更复杂（还涉及 min/max-content、最小尺寸限制等），调试时用 DevTools 的 Flex 覆盖层最有效。