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

问题描述

我有 3 个按钮，它们的宽度各不相同.我希望它们都获得相同的宽度以填充行的剩余宽度，因此最宽的仍然会比其他的更宽等.

您可以在下面看到我尝试用 flex 做的事情导致所有按钮的宽度相同.我知道 flex-grow 可用于按比例增长每个项目，但我不知道如何让它们都相对于原始大小增长.

您可以在第二行看到蓝色项目比其他两个大.我只希望所有三个都从当前大小平均扩展以填充该行.

谢谢

.row-flex {宽度:100%；显示:弹性；弹性方向:行；}.按钮 {弹性:1；显示:内联块；填充:10px；颜色:#fff;文本对齐:居中；}.button--1 {背景:红色}.button--2 {背景:绿色；}.button--3 {背景:蓝色；}

<a href="#" class="button button--1">单个</a><a href="#" class="button button--2">大标题</a><a href="#" class="button button--3">另一个非常大的标题</a>
<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>

解决方案

简答

您需要做的就是从 flex: 1 切换到 flex: auto.

<小时>

说明

两个关键数据中的flex-grow属性因素:

1. 正在使用的行/列中的可用空间.
2. flex-basis 属性的值.

<小时>

可用空间分布

flex-grow 属性在同一行中的 flex 项之间分配容器中的可用空间.

如果没有可用空间，flex-grow 没有作用.

如果有负的空闲空间(即弹性项目的总长度大于容器的长度)，则flex-grow没有效果并且flex-shrink 发挥作用.

<小时>

flex-basis 因素

当 flex-basis 为 0 时，flex-grow 忽略 flex item 中内容的大小，并处理该行上的所有空间作为可用空间.

这是绝对尺寸.线上的所有空间都是分布式的.

当flex-basis为auto时，首先扣除flex item中内容的大小来确定每个item的空闲空间.flex-grow 然后在项目之间分配可用空间(基于每个项目的 flex-grow 值).

这是相对尺寸.仅分配行上的额外空间.

以下是

<小时>

示例:

• flex: 1(绝对尺寸)

  这个速记规则分解为:flex-grow: 1/flex-shrink: 1/flex-basis: 0

  应用于所有弹性项目，这将使它们的长度相等，而不管内容如何.(请注意，在某些情况中会覆盖默认最小尺寸 是产生这种效果所必需的.)

• flex-grow: 1(相对大小)

  此规则本身将考虑内容大小和可用空间，因为 flex-basis 的默认值是 auto.

• flex: auto(相对大小)

  这种速记会影响内容大小和可用空间，因为它分解为:

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

此处有更多变体:7.1.1.flex

的基本价值

^{额外的搜索关键词:flex-basis auto 0 flex 1 auto 的区别}

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 size 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, the size of the content in flex items is first deducted to determine the free space in each item. flex-grow then distributes the free space among items (based on each item's flex-grow value).

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. (Note that in some cases an override of default minimum sizing will be necessary for this effect to occur.)

• 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: difference between flex-basis auto 0 flex 1 auto}

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