了解flex属性

Question

在此示例中，为什么.main元素（蓝色）除以.aside-1（黄色）和.aside-2（粉红色）空间，而不是所有元素？

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

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

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

使用wrap时，它会与两个最接近的元素分开。

无法理解这一点。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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%），这意味着每行只能有一个弹性项目，除了... < / LI>
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表示该元素的可用空间量是flex-grow: 1的其他弹性项目的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除外。因此，在这种情况下，所有选择器都具有相同的特异性和源顺序。