Make flex-grow expand items based on their original size(使 flex-grow 根据原始大小扩展项目)
问题描述
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:
- The free space in the row / column where it is being used.
- 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
isauto
.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 根据原始大小扩展项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:使 flex-grow 根据原始大小扩展项目
基础教程推荐
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 动态更新多个选择框 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06