Make flex items equal width
2 May 2023 (Updated 20 May 2025)
For each item, ensure:
flex-basis
is0
: This will ensure all items occupy the same initial space (0 px) to start with. If you don’t set this, the defaultauto
value will give elements the initial width of their contents. So even if the remaining free space in the flex container is distributed evenly, items can have different widths based on their content.flex-grow
is1
: This will ensure any remaining free space in the flex container is distributed evenly between the flex items.
Tagged:
CSS recipes
Thanks for your comment 🙏. Once it's approved, it will appear here.
Leave a comment