give-elements-the-same-width-with-flexbox.md

Give Elements The Same Width With Flexbox

By default, a row of elements in a basic flex container are going to have dynamic widths that accommodate their contents. This may not be desirable if you're going for a uniform look. You could give all child elements a fixed width (e.g. width: 100px), but that loses out on the flexibility of a flexbox layout.

You can instead give all child elements a uniform and flexible width using the flex property.

.flex-container {
  display: flex;
}

.flex-child {
  flex: 1;
}

This value is a relative ratio. If all children of the flex container have the same flex value (i.e. 1), then they will all be equally sized and that size will adjust as the width of the flex container changes.

source