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>
flex: 1 0 200px; If you have one element that has a flex-basis of 200px, flex-grow of 1, and flex-shrink of 0, this element will be at minimum 200px wide, but it will be allowed to grow if there is extra space. In this case, you can think of the flex-basis as being a minimum width.
0 (flex-grow cannot be calculated)
The flex-shrink property. The flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.
Switch from flex: 1
to flex: auto
.
The flex-grow
property factors in two key pieces of data:
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With