Property flex-basis
Specifies the initial length of a flexible item.
If you want to make the flex items equal in
width, it’s possible by using flex-basis
.
The flex-basis
property can accept the same
values as the width
or height
properties. The
default value is auto
, which resolves to
content. The content
value is an automatic
size based on the flex item content size.
.item-1 {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}
It’s important to reset the flex-grow
to 0
to
prevent the item from becoming larger than 50%.