html - 了解 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%;
}

上面的选择器针对所有五个 flex 元素:

• 标题
• 文章
• 放在一边
• 放在一边
• 页脚

flex 组件分解为:

• flex 增长:1
• flex-shrink: 1(默认)
• flex 基础:100%

你写道:

Why, in this example, is the .main element (blue) dividing space only with .aside-1 (yellow) and .aside-2 (pink), and not with all elements?

这就是为什么:

1. 容器设置为flex-flow: row wrap，表示允许 flex 元素换行。
2. 如上所述，所有 flex 元素都设置为 flex-basis: 100%(即 width: 100%)，这意味着每个元素只能有一个 flex 元素行，除了...
3. flex-basis: 100% 仅应用于 header 和 footer 因为...

4. 它被级联序列后面的其他规则覆盖¹:

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

However, I've noticed that with a nowrap wrapper the smallest item is .main.

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

In .main we say flex: 3 0px, which I think says, this element will be 3x bigger than the other four elements and will occupy 3/(3+1+1+1+1).

不完全是。 flex-grow: 3 意味着该元素将占用比其他具有 flex-grow: 1 的 flex 元素多 3 倍的可用空间量。这并不一定意味着它将是 3 倍的大小。更多详情: flex-grow not sizing flex items as expected

---

¹ 特异性似乎应该战胜级联，所有元素都应该得到 flex-basis: 100%:

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

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