css – 根据原始大小进行flex-grow扩展项目

前端之家收集整理的这篇文章主要介绍了css – 根据原始大小进行flex-grow扩展项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我连续有3个按钮,宽度各不相同.我希望它们都能获得相同的宽度以填充行的剩余宽度,因此最宽的仍然会比其他宽度更宽.

你可以在下面看到我尝试用flex做的事情导致所有按钮宽度相同.我知道flex-grow可以用来按比例增长每个项目,但我无法弄清楚如何让它们与原始大小相关.

您可以在第二行中看到蓝色项目大于其他两个项目.我只想让所有三个人从他们当前的大小平均扩大到填充行.

谢谢

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

解决方法

简答

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

说明

flex-grow属性考虑两个关键数据:

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

自由空间的分布

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

如果没有可用空间,则flex-grow不起作用.

如果存在负自由空间(即,柔性物品的总长度大于容器的长度),则柔性生长没有效果并且挠曲收缩发挥作用.

弹性基础因子

当flex-basis为0时,flex-grow将忽略flex项中内容的宽度/高度,并将该行上的所有空间视为可用空间.

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

当flex-basis为auto时,flex会增加flex项中内容大小的第一个因子.然后,它在项目之间分配可用空间,从而使每个项目根据其内容的长度按比例增长.

这是相对大小调整.仅分配线上的额外空间.

这是spec的插图:

例子:

> flex:1(绝对尺寸)

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

适用于所有弹性项目,无论内容如何,​​这将使它们长度相等.
> flex-grow:1(相对尺寸)

此规则本身将考虑内容大小和可用空间,因为the default value for flex-basis is auto.
> flex:auto(相对大小)

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

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

更多变化:7.1.1. Basic Values of flex

搜索的其他关键字:flex-basis:auto flex-basis:0之间的差异

原文链接:https://www.f2er.com/css/216255.html

猜你在找的CSS相关文章