了解flex属性 [英] Understanding the flex property

问题描述

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

我们有一个将所有元​​素占据一行的包装器。

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

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

和 wrap ，它与两个最接近的元素分开。

Can'

  .wrapper {display：flex;柔性流动：排绕; font-weight：bold; text-align：center;}。wrapper> * {padding：10px; flex：1 100％;}。header {background：tomato;}。footer {background：lightgreen;}。main {text-align：left;背景：deepskyblue;身高：50vh; 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> < /冠词GT; < aside class =aside aside-1> Aside 1< / aside> < aside class =aside aside-2> Aside 2< / aside> < footer class =footer> Footer< / footer>< / div>  

c> .wrapper> * {
padding：10px;
flex：1 100％;
}

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

• 标题


• article


• 抛开


• 抛开


• 页脚


$ b $ < flex 组件分解为：

• flex-grow：1


• flex-shrink：1 （默认情况下）
  
• flex-basis：100％

您写了：

为什么在这个例子中是 .main

code>元素（蓝色）仅用 .aside-1 （黄色）和 .aside-2 （粉色），而不是所有元素？

这就是为什么：

1. 容器设置为 flex-flow：行换行，这意味着允许flex项目换行。 b
2. 如上所述，所有flex i tems被设置为 flex-basis：100％（即， width：100％），这意味着每行只能有一个flex项目，除外...


3. flex-basis：100％仅适用于标题和页脚 code>，因为...



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项目的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; }

除通用选择器（ * ）具有零特性。因此，在这种情况下，所有选择器都具有相同的特性和来源顺序。

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?

We have a wrapper that is putting all elements occupying one line.

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

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

And with wrap, it divides with the two closest elements.

Can't understand this.

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

解决方案

First take a look at this rule in your code:

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

The selector above is targeting all five flex items:

• header
• article
• aside
• aside
• footer

The flex component breaks down to this:

• flex-grow: 1
• flex-shrink: 1 (by default)
• flex-basis: 100%

You wrote:

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?

This is why:

1. The container is set to flex-flow: row wrap, meaning flex items are allowed to wrap.
2. As noted above, all flex items are set to flex-basis: 100% (i.e. width: 100%), meaning there can only be one flex item per row, except...
3. flex-basis: 100% only gets applied to the header and footer because...

4. it is being overridden by other rules later in the cascade sequence¹:

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

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

Yes, because, as mentioned above, it has flex-basis: 0 and 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).

Not quite. flex-grow: 3 means that the element will consume 3x the amount of free space than other flex items with flex-grow: 1. It doesn't necessarily mean it will be 3x the size. More details here: flex-grow not sizing flex items as expected

---

¹ It may appear that specificity should win over the cascade, and all items should get flex-basis: 100%:

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

Except that the universal selector (*) has zero specificity. So in this case, all selectors have equal specificity and source order matters.

这篇关于了解flex属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！