Flexbox replaces GRID?

Navigation
3

I've been taking a look at the flex properties, and have I realized that they do the same thing as the grid or am I wrong? If so, what is the difference between them? When should I use one or the other?

    
asked by anonymous 05.10.2016 / 21:38

1 answer

2

Concepts

Flexbox :

  

It is part of the CSS3 specification that promises to organize elements in   page when the layout needs to be viewed in   different screen sizes and in different devices. Flexbox helps   to organize these elements without the help of float and also help us   Box Style problems that usually happen when   we add, padding , margin and border beyond the width of the element.

(Source: Flexbox, CSS )

Grid :

  

It is a structure that allows content to be stacked vertically and   horizontally in a consistent and easily manageable way.   In addition, the code of a grid system is a project-agnostic ,   giving it a high degree of portability, so that it can be   adopted in new projects.

(Source: Grid, Tableless )


Difference

  • Flexbox is essentially to place items in a single dimension - in a row or column.

  • Grid is for layout of two-dimensional items - rows and columns.


When to use?

The two can be used together to have a better code. The Grid can be used in external areas (header, body, menu, footer) and FlexBox for components.


References:

05.10.2016 / 23:24
"Join" two graphs in R https (webservice) request from São Paulo Public Finance