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

问题描述

为什么在这个例子中，.main 元素(蓝色)只用 .aside-1(黄色)和 .aside-2 分隔空间(粉红色)，而不是所有元素?

我们有一个包装器，它将所有元素放在一行中.

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

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

并且使用 wrap，它会与两个最接近的元素分开.

无法理解.

.wrapper {显示:弹性；flex-flow:行包装；字体粗细:粗体；文本对齐:居中；}.wrapper>* {填充:10px；弹性:1 100%；}.header {背景:番茄；}.页脚{背景:浅绿色；}.主要的 {文本对齐:左；背景:深蓝；高度:50vh；弹性:3 0px；}.aside-1 {背景:黄金；}.aside-2 {背景:hotpink；}.在旁边 {弹性:1 自动；}.aside-1 {订单:1；}.主要的 {订单:2；}.aside-2 {订单:3；}.页脚{订单:4；}

<header class="header">Header</header><文章类=主要"><p>Pellentesque 居民 morbi tristique senectus et netus etmalesuada Fames ac turpis egestas.Vestibulum tortor quam、feugiat vitae、ultricies eget、tempor sat amet、ante.Donec eu libero 坐 amet quam egestas semper.Aenean ultricies mi vitae est.Mauris placerat eleifend leo.</p></文章><aside class="asideside-1">Aside 1</aside><aside class="asideside-2">Aside 2</aside><footer class="footer">Footer</footer>

解决方案

首先看一下你代码中的这条规则:

.wrapper >* {填充:10px；弹性:1 100%；}

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

• header
• 文章
• 旁边
• 旁边
• 页脚

flex 组件分解为:

• flex-grow: 1
• flex-shrink: 1(默认)
• flex-basis: 100%

你写道:

<块引用>

为什么在这个例子中，.main 元素(蓝色)只用 .aside-1(黄色)和 .aside-2 分隔空间(粉红色)，而不是所有元素?

这是为什么:

1. 容器设置为flex-flow: row wrap，意思是允许弹性项目换行.
2. 如上所述，所有 flex 项都设置为 flex-basis: 100%(即 width: 100%)，这意味着每个 flex 项只能有一个行，除了...
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 的 flex 项目消耗 3 倍的可用空间量.这并不一定意味着它将是 3 倍的大小.更多详情:flex-grow 未按预期调整 flex 项目的大小

<小时>

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

• .wrap >* { 弹性基础:100%；} vs .main { flex: 3 0px;}
• .wrap >* { 弹性基础: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屋！