Flexbox vs Twitter Bootstrap (or similar framework) [closed]

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