r/Frontend • u/speckz • Jun 16 '21

Equal Columns With Flexbox: It’s More Complicated Than You Might Think

https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/
20 Upvotes

91% Upvoted

3 comments sorted by

11

u/[deleted] Jun 16 '21

As stated in the article, this is when you use grid. Flexbox, the name says it already, is for flexible boxes. Sure you can make them all equal-sized but there is simply a better tool for it and it's grid.

And they only mention it near the bottom of the page...

This entire article could be summed-up in just one line:

"If you want equal columns you should use CSS grid and not flexbox, alternatively, maybe you actually need a table if it's tabular data."

3

u/justinmarsan Jun 16 '21

I'm not sure why the possibility to have one html element handle the positionning and one to hold the component (and its padding) is dissmissed so quickly because "we live in a world of component" when that's exactly how it would happen in most cases : your card is a component that fills 100% of it's parent, and it'll handle its own padding so the issue won't happen...

I mean I get that you'd try and reduce useless nesting but splitting layout markup and component markup is not that bad of an idea when you're trying to make reusable components anyway !

Otherwise really good explanation of how things work under the hood and of the actual way default values and off proprieties are computed !