Flexbox vs Twitter Bootstrap (or similar framework)

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?

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 https://stackoverflow.com/questions/27772965/how-to-get-same-height-in-displaytable-cell/27773282#27773282

• 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

I havent use Flexbox (I have read about it and seems to be great) but I'm a Bootstrap frontend dev. I suggest you test Flexbox printing pages before making a final decision. You know... Sometimes printing styles are a terrible headache and Bootstrap helps me a lot when I have to design print formats.

I am afraid you missed another article on CSS tricks:

> Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Does not mean, you may not try, but just think twice. And all depends on desired browser support in the end.