Better way to make equal sized columns using flexbox?

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:

ul {
  display: flex;
}
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0 */
li {
   flex: 1 1 0;
}

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:

ul {
  display: flex;
}
li {
   width: 33.33333333%;
}

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.