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

Solution 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

Solution 2:

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.

Solution 3:

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.