How to make flexbox items the same size?
Set them so that their flex-basis
is 0
(so all elements have the same starting point), and allow them to grow:
flex: 1 1 0px
Your IDE or linter might mention that the unit of measure 'px' is redundant
. If you leave it out (like: flex: 1 1 0
), IE will not render this correctly. So the px
is required to support Internet Explorer, as mentioned in the comments by @fabb;
You could add flex-basis: 100%
to achieve this.
Updated Example
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
For what it's worth, you could also use flex: 1
for the same results as well.
The shorthand of flex: 1
is the same as flex: 1 1 0
, which is equivalent to:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}