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
Minimalistic answer with (hopefully useful, explanatory) alternatives:
HTML:
<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>
CSS:
.row-flex {
display: flex;
}
.button {
flex-grow: 1; /* make the item grow proportionally to its original size */
/* default value is 0, the item does not grow */
/* a meaningful default for flexbox items positioning with */
/* justify-content: <value>; */
padding: 10px;
color: #fff;
text-align: center;
}
.button--1 {
background: red
}
.button--2 {
background: green;
}
.button--3 {
background: blue;
}
The following CSS declarations also work because all they do is override the default flex-grow: 0;
to the (for the desired behavior required) flex-grow: 1;
:
.button {
flex: auto;
...
}
which is a shorthand for:
.button {
flex: 1 1 auto;
...
}
which is a shorthand for:
.button {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
...
}
All you need to do is 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
Not sure if this is entirely what you are after, but if you just set flex-grow:1
instead of flex:1;
, I think that is your required result:
.row-flex {
width: 100%;
display: inline-flex;
flex-direction: row;
}
.button {
flex-grow: 1;
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>
Using flex property you can set proportions:
.button {
display: inline-block;
padding: 10px;
color: #fff;
text-align: center;
}
.row {
display: flex;
}
.button--1 {
background: red;
flex: 1 1 auto;
}
.button--2 {
background: green;
flex: 2 1 auto;
}
.button--3 {
background: blue;
flex: 3 1 auto;
}
<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>