how to prevent last item of flex to grow
html
<section>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</section>
```
Sorry for the formatting but I'm on my phone. As you can probably see the last element of the flex is stretched out but I want it to be the same size as the other siblings, how can I do that? I cannot set a max width otherwise Flex grow won't work properly and I can't even disable Flex grow on it because I want it to be the same size as other children, not the min-width size. And also, in this case it could happen that there is not 1 but 2 extra children
6 Replies
Is there supposed to be a screenshot? Since you said "as you can probably see the last element of the flex is stretched out..."
The default behavior of align-items is "stretch". If you set any other value on the parent ("align-items: start; align-items: center; align-items: end") it will be its intrinsic size. You can also use the dev tools with flex (or grid) to experiment with the properties justify-content, align-content, and align-items. When you open dev tools and select the element that has "display: flex;". In the styles, there's a little icon next to the "display: flex" declaration, if you click on that icon a little popover comes up and you can experiment with these properties.
It doesn't work if I set align-items start
Oh it's bc of the flex-grow you have on the children.
Grows to take up all the available space
I think you might want to use grid, instead of flex, here
with flexbox, each row of content is independent of the other rows. With grid, you have, well, a grid, so they all work together.