Grid or Flexbox for responsive layouts?

react
1

I’m building an app using MaterializeCSS and was using the 12 grid system most of us are familiar with:

http://materializecss.com/grid.html
http://getbootstrap.com/css/#grid

However I read that React/React Native embraces Flexbox?

I’m pretty new to all this, so while it’s still early, should I ditch the Grid for Flexbox?

2

I’ve been using flex grid for a long time, have no problems with it.

3

I’d recommend flexbox. When you build mobile app with react native, the understanding of flexbox would be very useful since React Native use flexbox instead of grid. You can’t use grid in React Native since RN uses Apple Native UIKit which use flexbox instead of grid

4

Flexbox is awesome! You just need to be careful in IE :wink: https://github.com/philipwalton/flexbugs

5

Flex box works across a decent amount of recent versions of popular browsers, particularly if you use an autoprefixer in your style processing.

6

Flexbox support is pretty good since most people use chrome/firefox/safari. From my experience, the only most troublesome thing is setting up the auto-prefixer correctly, because the 2009 Syntax display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ breaks google bot rendering.

My latest auto-prefixer settings in my meteor project is set to "browsers": ["last 2 versions", "safari > 6"], which gives you the most you need, but no IE prefixes.

7

Yeah it is well supported, but not in IE :wink: simple example:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Without additional work it will not work in IE11 :wink: and this is just one example which is commonly used.