161

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?

Rvervuurt
  • 8,589
  • 8
  • 39
  • 62
  • 5
    I use Flexbox with Bootstrap. – Aibrean Dec 22 '14 at 15:25
  • 2
    Take a look at [Zurb's Foundation For Apps](http://foundation.zurb.com/apps/). it is entirely built on top of Flexbox Grid System – Salem Ouerdani Aug 07 '15 at 08:54
  • 2
    [This](http://v4-alpha.getbootstrap.com/getting-started/flexbox/) might be helpful. [Bootstrap now switching from floats to flex](http://v4-alpha.getbootstrap.com/getting-started/flexbox/) – Faizan Akram Dar Feb 06 '16 at 07:52
  • 1
    Bootstrap 4 is now flexbox by default! Flexbox is an immensely powerful layout tool, providing unparalleled flexibility and control to the grid system and core components. It comes at the cost of dropping IE9 support, but brings significant improvements to component layout, alignment, and sizing. – Neri Barakat Jun 29 '17 at 12:10
  • 5
    I disagree that this should be closed as opinion based. The asker is looking for fact, not opinion. "What are the pros and cons of flexbox?" The asker(like me) is trying to determine the the strongpoint and drawbacks of each system. – Darin Cardin Sep 22 '17 at 13:26
  • now the question is about: what are the pros and cons of flexbox vs grid :D Flexbox is 1 dimention based and Grid is 2 dimention based. I did write an article about it [here](https://dioxmio.medium.com/grid-vs-flexbox-which-one-should-you-be-using-471cb955d3b5) – Jose Greinch Dec 25 '20 at 15:10

3 Answers3

107

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

morhook
  • 685
  • 7
  • 19
ctf0
  • 6,991
  • 5
  • 37
  • 46
  • 1
    Thanks for your comment. I couldn't find any explanations on what was the "better" of the two, so I hope my question (and your and future answers) will help people decide. Luckily, IE 11 is getting a bigger market share right now than the previous three versions combined (of which IE10 supports `flexbox`), so in my eyes it's safe to use. What is your opinion of using a combination of a framework and `flexbox`? Ignoring the framework's grid system while using it, of course. – Rvervuurt Dec 22 '14 at 09:25
  • 2
    Flexbox can be used to create a more powerful grid system in an easier way, but isn't a grid system by itself. [Better, Simpler Grid Systems](http://philipwalton.github.io/solved-by-flexbox/demos/grids/) shows some ideas and [ZURB Foundation for Apps](http://foundation.zurb.com/apps/) uses flexbox for layout purposes – ckuijjer Dec 22 '14 at 09:29
  • actually u can use both if u want to, which i believe is the best choice because u don't need to wrap ur mind around something you're already used to for quite some time (like for those who don't know anything beyond BS), but for me the selling point of flex-box is it have the same flexibility u can only get by using JS but without writing a single line of code. – ctf0 Dec 22 '14 at 09:51
  • Full compatibility data: http://caniuse.com/#feat=flexbox Note that older Android also has issues. – cvrebert Dec 22 '14 at 16:54
  • dam ,and i thought we are almost there of using it ,it seems it will take another year or something b4 we see it in the wild ,thanx for the heads-up. – ctf0 Dec 22 '14 at 19:11
  • @cvrebert yes, older Android isn't compatible, but nor is it compatible with bootstrap, and most users of old Android use a browser like chrome rather then Android browser anyway. – Tom Mar 17 '15 at 20:12
  • The new bootstrap has switched from floats to flex , check [this](http://v4-alpha.getbootstrap.com/getting-started/flexbox/) – Faizan Akram Dar Feb 06 '16 at 07:51
  • Is flexbox an alternative to Bootstrap grid system, or is it complementary. I ask because bootstrap v4 switches its grid system to use flexbox, what does that really mean? – Deepak Mittal Feb 12 '16 at 04:33
  • @DeepakMittal its not an alternative , in the latest release from BS you can either use the flexbox based grid or the float based grid, or both if u want but it will take some tweaking. – ctf0 Feb 15 '16 at 07:59
  • Bootstrap is likely to be a framework you're using for the whole site - including its grid system. Flexbox isn't a complete CSS framework & I don't think it's fair to suggest that users can replace Bootstrap with Flexbox is it?! Also, Bootstrap 4 will use Flexbox. – niico Jul 10 '17 at 07:37
6

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.

simhumileco
  • 31,877
  • 16
  • 137
  • 115
kurroman
  • 978
  • 10
  • 12
  • thats exactly why you would use the float grid only for the printable divs in conjunction with the bootstrap print classes – ctf0 Feb 15 '16 at 07:56
1

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.

Kout
  • 444
  • 1
  • 7
  • 14
  • 24
    Make sure you understand that article is talking about a new emerging Grid layout - not the grid of bootstrap. – getsetbro Feb 10 '15 at 14:52
  • 5
    Must say I did miss that! :) Thank you for correction. – Kout Feb 10 '15 at 16:40
  • Upvoted, you have pointed out a very clear distinction as how to use flex box and grid without conflict of intent and purpose, and for me, it doesn't matter if you mean bootstrap grid or grid ayout – Ahmad Farouk Mar 04 '17 at 13:33