根据原始大小制作扩展项目 [英] Make flex-grow expand items based on their original size

问题描述

我有一排三个按钮，宽度各不相同。我希望它们的宽度都相同，以填充行的剩余宽度，所以最宽的宽度将比其他宽度宽。

您可以在下面看到我试图用flex做的事情导致所有的按钮都是相同的宽度。我知道 flex-grow 可以用来按比例增长每个项目，但我无法弄清楚如何让它们相对于原始大小增长。 p>

你可以在第二行看到蓝色的项目比另外两个大。我只是希望所有三个从他们当前的大小平等扩大到填充行。

谢谢

  .row-flex {width：100％;显示：flex; flex-direction：row;}。button {flex：1;显示：内联块;填充：10px;颜色：#fff; text-align：center;}。button  -  1 {background：red} .button  -  2 {background：green;}。button  -  3 {background：blue;}  

< div class =row-flex> < a href =＃class =button button - 1>单个< / a> < a href =＃class =button button - 2>大标题< / a> < a href =＃class =button button - 3>另外一个非常大的标题< / a>< / div>< br />< div class =row> < a href =＃class =button button - 1>单个< / a> < a href =＃class =button button - 2>大标题< / a> < a href =＃class =button button - 3>另外一个很大的标题< / a>< / div>

do是从 flex：1 切换到 flex：auto 。

解释

$ b

flex-grow 两个关键的数据：

1. 使用的行/列的可用空间。


2. flex-basis 属性的值。
   

---

可用空间的分配
$ b <

如果没有可用空间，<$ c $> 属性在容器中的同一行中的flex项目之间分配可用空间。 c> flex-grow 不起作用。
$ b 如果存在负空闲空间（即，flex项目的总长度大于容器的长度），那么 flex-grow 不起作用， flex-shrink 进场了。 <$>
$ b

基于弹性的因子

$ b

当 flex-basis 是 0 ， flex-grow 会忽略flex项目中的内容的宽度/高度，并将行上的所有空间视为可用空间。

绝对大小。
$ b

当 flex-basis 是 auto 时， code>， flex-grow flex项目中内容大小的第一个因子。然后在项目之间分配自由空间，导致每个项目根据其内容的长度按比例增长。

这是相对大小。只有额外的空间分布。

以下是

---

示例： b
$ b

• flex：1 （绝对大小）
  
  

  速记规则分解为： flex-grow：1 / flex-shrink：1 / flex-basis：0

  
  
  

  应用于所有弹性项目，无论内容如何，​​这将使其长度相等。




• flex-grow：1 （relative sizing）
  
  

  规则本身将影响内容大小和可用空间，因为

>


• flex：auto （relative sizing）

  
  
  

  内容大小和可用空间，因为它分解为：
  
  

  
  
  • flex-grow：1 $ flex-shrink：1
  
  
  • flex-基础：自动
  
  







a href =https://www.w3.org/TR/css-flexbox-1/#flex-common =nofollow noreferrer> 7.1.1。基本值 flex

^{其他关键字搜索）：flex-basis之间的区别：auto与flex-basis：0}

I have 3 buttons in a row which all vary in width. I want them to all gain width the same to fill the remaining width of the row, so the widest will still be wider than the others etc.

You can see below that what I've tried to do with flex has resulted in all the buttons being the same width. I know flex-grow can be used to proportionally grow each item, but I can't work out how to get them all to grow in relation to their original size.

You can see in the second row that the blue item is larger than the other two. I just want all three to expand from their current size equally to fill the row.

Thanks

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: 1;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

解决方案

Short Answer

All you need to do is switch from flex: 1 to flex: auto.

---

Explanation

The flex-grow property factors in two key pieces of data:

1. The free space in the row / column where it is being used.
2. The value of the flex-basis property.

---

Distribution of Free Space

The flex-grow property distributes free space in the container among flex items in the same line.

If there is no free space, flex-grow has no effect.

If there is negative free space (i.e., the total length of flex items is greater than the length of the container), then flex-grow has no effect and flex-shrink comes into play.

---

The flex-basis factor

When flex-basis is 0, flex-grow ignores the width / height of the content in flex items and treats all space on the line as free space.

This is absolute sizing. All space on the line is distributed.

When flex-basis is auto, flex-grow first factors in the content size in flex items. It then distributes free space among items, resulting in each item growing proportionally based on the length of their content.

This is relative sizing. Only extra space on the line is distributed.

Here's an illustration from the spec:

---

Examples:

• flex: 1 (absolute sizing)

  This shorthand rule breaks down to: flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

  Applied to all flex items, this will make them equal length, regardless of content.

• flex-grow: 1 (relative sizing)

  This rule by itself will factor in both content size and available space, because the default value for flex-basis is auto.

• flex: auto (relative sizing)

  This shorthand factors in both content size and available space because it breaks down to:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

More variations here: 7.1.1. Basic Values of flex

^{additional keywords (for search): the difference between flex-basis: auto vs flex-basis: 0}

这篇关于根据原始大小制作扩展项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！