Is there a better way than the following to make equal sized columns no matter the content size using flexbox?
ul {
display: flex;
}
li {
flex-basis: 30%;
flex-grow: 1;
}
Challenge link (Layout two): https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills
Top comments (2)
Flex-basis is probably one of the most confusing CSS properties (in combination with the flex-grow and flex-shrink), and if what you really want is 3 equal-width columns no matter what the content, then you are better off using grid instead of flexbox. However if you need to use flex, you can do:
See developer.mozilla.org/en-US/docs/W... for more information.
You could also force a width. The default flex-basis value is auto, which means it checks for a width set, and since we're setting the width to 33%, that becomes the default flex-basis of the li tag:
There are two different ways to reach what you expect,
1- Let the flex items to rearrange itself.
2- Defining the width yourself (with or without a calc).
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
Live example + code:
Hope it helps 😁
Once you understand Flex you'll find flex suitable for creating almost any piece of your UI. I personally prefer Flex to Grid.