> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/css/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.

```css
.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](https://css-tricks.com/the-thought-process-behind-a-flexbox-layout/)