了解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项:

• 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,意味着允许flex项包装.
2. 如上所述,所有弹性项目都设置为flex-basis: 100%(即width: 100%),意味着每行只能有一个弹性项目,除了......
3. flex-basis: 100%只适用于header和footer因为......

4. 稍后在级联序列^1中被其他规则覆盖:

   .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没有像预期的那样调整flex项目的大小

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

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

除了通用选择器(*)具有零特异性.因此,在这种情况下,所有选择器具有相同的特异性和源顺序.