Flexbox vs Twitter Bootstrap (or similar framework)

Question

I have recently discovered Flexbox when I was looking for a solution to make divs the same hight, depending on the highest one.

I have read the following page on CSS-tricks.com and it convinced me that flexbox is a very powerful module to learn and use. However, it also made me think about the fact that Twitter Bootstrap (and similar frameworks) offer kind of the same functions (+ of course a lot extra) with their grid systems.

Now, the questions are: What are the pros and cons of flexbox? Is there something one can't do with Flexbox that one can do with a framework like Bootstrap (of course purely talking about the grid system)? Which one is faster when implemented on a website?

I'm guessing when only for the grid system, it's smarter to purely use flexbox, but what if you're already using a framework, is there something flexbox can add?

Are there any reasons to choose flexbox's "grid system" over a framework's?

Answer 1

For a couple of reasons, flexbox is much better than bootstrap:

• Bootstrap uses floats to make the grid system, which many would say is not meant for the web, where flex-box does the opposite by staying flexible to the items' size and contents; same difference as using pixels vs em/rem, or like controlling your divs only using margins and padding and never setting a pre-defined size.

• Bootstrap, because it uses floats, needs clearfix after each row, or you will get misaligned divs of different height. Flex-box doesn't do that and instead checks for the tallest div in the container and sticks to its height.

The only reason I would go with bootstrap over flex-box is lack of browser support (IE mainly) (die already). And sometimes you get different behavior from Chrome and Safari even though both use the same webkit engine.

Edit:

BTW if the only problem you are facing is the equal height columns, there are quite a few solutions for that:

• You can use display: table on the parent, an display: table-cell; on the child. See How to get same height in display:table-cell

• You can use absolute positioning on each div:
  position: absolute; top: 0; bottom: 0;

• There is also the jquery/JS solution, and another solution I can't remember at the moment that I'll try to add later.

Edit 2:

Also check http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties on how flex-box works.

Edit 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Edit 4: https://caniuse.com/#feat=flexbox