What’s the difference and when to use Flexbox or CSS Grid?

Asked

Viewed 3,180 times

3

First we had the Flexbox as a new solution for building and responsive layouts. More precisely on the part of grids. Now there is little time the CSS Grid. My question is: What is the difference between 2 ? When should I use 1 instead of the other ? For building grids for responsive layouts, which one should I choose ?

Thank you

css css3 grid flexbox

2 answers

3


It uses GRID more for the whole page (the < body > whole). It will divide the full page into rows and cells (as if it were a large Excel spreadsheet). This GRID was [inter-] Microsoft’s invention. But most browsers still do not accept it, only the EDGE of MS. :/

The FLEX (display:flex) is mostly used to center or position < li > s or < div > s that are inside another parent div (container). The FLEX is the most used today (GRID, which is practically in the test phase). But, attention: FLEXBOX is one thing, the FLEX of the display:flex (CSS) is something else. I hope you asked me about the latter, although many call FLEX FLEXBOX, but it’s not correct: FLEXBOX is a framework. FLEX are pure CSS attributes.

Maybe GRID will only be something for us to return to the past of the Tables... It is not being seen as a good alternative by the majority.

Here I made an example of FLEX to centralize rows and columns, using flex:.
https://codepen.io/colombe/pen/mPmNbb

I recommend you read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

  • question: the flex of css does not have support for all browsers, but flexbox has?

  • I honestly don’t know why I’ve never used this frame. But FLEX seems to be more accepted.. look at this: http://i.stack.Imgur.com/azmua.png

  • Thanks for the @Fiel reply. Yes, I wasn’t talking about the framework. But on the question of the name, even the W3 called so 0 https://www.w3.org/TR/css-flexbox-1/.

  • The flexbox framework uses attributes called flexbox to make this part of responsiveness.

1

The purposes of flexbox and Grid-layout are different.

Flexbox:

His focus is to organize the items in rows or columns, but following the "block" system, that is to say the content will be several rectangles, one next to the other, or on the other.

Grid-layout:

As the name says, it makes a grid (grid), and serves to organize your items in a more sophisticated way, where each one has an independent behavior, occupies a number of rows and columns that you stipulate. Example of layout I needed to do: grid-layout The mobile version was totally different from this, but it was very easy to convert, because, as I said, each item behaves independently, so I just changed the position of each of them and it was easier than using any "gambiarra". Grid-layout problem is IE compatibility, works only on version 11 and not very well, so I use a SASS mixin library that generates for me. grid-layout-IE11

Browser other questions tagged css css3 grid flexbox

You are not signed in. Login or sign up in order to post.