理解 flex 属性

Question

为什么在这个例子中，.main 元素（蓝色）只用.aside-1（黄色）和.aside-2（粉色）来划分空间，而不是所有元素？

我们有一个包装器，它让所有元素占据一行。

在.main 中我们说flex: 3 0px，我认为这个元素将比其他四个元素大 3 倍，并将占据 3/(3+1+1+1+1)。

但是，我注意到使用 nowrap 包装器时，最小的项目是 .main。

对于wrap，它会被两个最接近的元素分开。

无法理解。

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper>* {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
  height: 50vh;
  flex: 3 0px;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

.aside {
  flex: 1 auto;
}

.aside-1 {
  order: 1;
}

.main {
  order: 2;
}

.aside-2 {
  order: 3;
}

.footer {
  order: 4;
}

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

Answer 1

首先看看你代码中的这条规则：

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

上面的选择器针对所有五个弹性项目：

• header
• article
• aside
• aside
• footer

flex 组件分解为：

• flex-grow: 1
• flex-shrink: 1（默认）
• flex-basis: 100%

你写道：

为什么在这个例子中，.main 元素（蓝色）只用.aside-1（黄色）和.aside-2（粉红色）来划分空间，而不是所有元素？

这就是为什么：

1. 容器设置为flex-flow: row wrap，这意味着允许弹性项目包装。
2. 如上所述，所有弹性项目都设置为flex-basis: 100%（即width: 100%），这意味着每行只能有一个弹性项目，除了...
3. flex-basis: 100% 仅适用于 header 和 footer 因为...

4. 稍后在级联序列中被其他规则覆盖¹：

   .main { flex: 3 0px; }
   
   .aside { flex: 1 auto; }
   

但是，我注意到使用 nowrap 包装器时，最小的项目是 .main。

是的，因为如上所述，它有flex-basis: 0 和flex-shrink: 1。

在.main 中我们说flex: 3 0px，我认为这个元素将比其他四个元素大 3 倍，并将占据 3/(3+1+1+1+1)。

不完全是。 flex-grow: 3 表示该元素将消耗 3 倍于其他具有 flex-grow: 1 的弹性项目的可用空间量。这并不一定意味着它将是 3 倍的大小。更多详情：flex-grow not sizing flex items as expected

---

¹ 似乎特异性应该胜过级联，所有项目都应该得到flex-basis: 100%：

• .wrap > * { flex-basis: 100%; } 与 .main { flex: 3 0px; }
• .wrap > * { flex-basis: 100%; } 与 aside { flex: 1 auto; }

除了universal selector (*) has zero specificity。所以在这种情况下，所有选择器都具有相同的特异性和源顺序问题。