flex 1 和 display flex 区别

1. flex: 1 —— 约束自身

作用对象：自己（当前元素）

作用：决定在父容器中占据多少空间

.child {
  flex: 1;  /* 我要占多少位置 */
}

示例：

.container {
  display: flex;
  width: 500px;
}

.a {
  flex: 1;        /* 占据剩余空间 */
}

.b {
  width: 100px;   /* 固定宽度 */
}

[══════════════════════][════════]
          ↑                  ↑
        flex: 1           width: 100px
       (约400px)          (100px)

---

2. display: flex —— 约束子元素

作用对象：子元素

作用：决定子元素如何排列

.parent {
  display: flex;  /* 我的孩子怎么排 */
}

示例：

.container {
  display: flex;        /* 子元素横向排列 */
  flex-direction: row;  /* 默认：从左到右 */
  align-items: center;  /* 垂直居中 */
  gap: 10px;           /* 子元素间距 */
}

┌─────────────────────────────────┐
│  [子1]  [子2]  [子3]            │  ← 横向排列
│    ↑      ↑      ↑              │
│    └──────┴──────┘              │
│      被 display:flex 约束        │
└─────────────────────────────────┘

---

对比总结

属性	作用对象	含义	类比
flex: 1	自身	我在父容器中占多少空间	我要多大的座位
display: flex	子元素	我的子元素怎么排列	孩子们怎么坐

---

树形组件实例

.node-content {
  display: flex;      /* ← 约束子元素横向排列 */
  align-items: center;
  gap: 8px;
}

.node-label {
  flex: 1;           /* ← 约束自己占据剩余空间 */
}

┌─────────────────────────────────────────┐
│  .node-content (display: flex)          │
│  ┌─────────┬─────────────┬────────┐    │
│  │  按钮   │    标签     │  徽章  │    │
│  │         │  flex: 1    │        │    │
│  │         │  占满剩余    │        │    │
│  └─────────┴─────────────┴────────┘    │
│         ↑                               │
│    子元素横向排列（display:flex的效果）   │
└─────────────────────────────────────────┘

---

记忆口诀

flex: 1         = "我要占多少"   → 约束自己
display: flex   = "孩子怎么排"   → 约束子元素