了解flex属性

问题描述

在这个例子中，为什么只用

在 code>，因为...

在后面的级联序列中，其他规则将覆盖它：

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

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

不完全。 flex-grow：3 表示该元素将消耗的可用空间量是其他Flex项目的3倍，其中 flex-grow：1 。这并不一定意味着它将是3倍大小。更多细节在这里：

---

可能看起来特异性应该胜过级联，并且所有项目都应该得到 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:

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

Yes, because, as mentioned above, it has flex-basis: 0 and flex-shrink: 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属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！