Make flex items equal width
2 May 2023 (Updated 20 May 2025)
For each item, ensure:
flex-basisis0: This will ensure all items occupy the same initial space (0 px) to start with. If you don’t set this, the defaultautovalue 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-growis1: 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