Vayamos rápido y tratemos de responder esta pregunta con puntos rápidos en lugar de largas explicaciones. Hay muchas similitudes entre flexbox y grid, comenzando por el hecho de que se utilizan para el diseño y son mucho más poderosas que cualquier técnica de diseño anterior. Pueden estirarse y encogerse, pueden centrar cosas, pueden reordenar cosas, pueden alinear cosas … Hay muchas situaciones de diseño en las que puede usar cualquiera de las dos para hacer lo que tenemos que hacer, y muchas situaciones en las que uno es más adecuado que el otro. Centrémonos en las diferencias en lugar de en las similitudes:
Flexbox puede opcionalmente envoltura. Si permitimos que un contenedor flexible se envuelva, se envolverá en otra fila cuando los elementos flexibles llenen una fila. Dónde se alinean en la siguiente fila es independiente de lo que sucedió en la primera fila, lo que permite una apariencia de mampostería.
La cuadrícula también puede ajustarse opcionalmente (si permitimos el llenado automático) en el sentido de que los elementos pueden llenar una fila y moverse a la nueva fila (o colocarse automáticamente), pero al hacerlo, se ubicarán a lo largo de las mismas líneas de cuadrícula que todas las demás. los elementos hacen.
Flexbox en la parte superior, rejilla en la parte inferior
Podría pensar en flexbox como “unidimensional”. Si bien flexbox puede hacer filas y columnas en el sentido de que permite que los elementos se envuelvan, no hay forma de controlar declarativamente dónde terminan los elementos, ya que los elementos simplemente empujan a lo largo de un solo eje y luego se envuelven o no se envuelven en consecuencia. Hacen lo que hacen, por así decirlo, a lo largo de un plano unidimensional y es debido a esa dimensión única que podemos hacer cosas opcionalmente, como alinear elementos a lo largo de una línea de base, que es algo que la cuadrícula no puede hacer.
.parent {
display: flex;
flex-flow: row wrap; /* OK elements, go as far as you can on one line, then wrap as you see fit */
}Podría pensar en la cuadrícula como “bidimensional“ en el sentido de que podemos (si queremos) declarar el tamaño de las filas y columnas y luego colocar explícitamente las cosas en las filas y columnas que elijamos.
.parent {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* Three columns, one three times as wide as the others */
grid-template-rows: 200px auto 100px; /* Three rows, two with explicit widths */
grid-template-areas:
"header header header"
". main sidebar"
"footer . .";
}
/*
Now, we can explicitly place items in the defined rows and columns.
*/
.child-1 {
grid-area: header;
}
.child-2 {
grid-area: main;
}
.child-3 {
grid-area: sidebar;
}
.child-4 {
grid-area: footer;
}
Flexbox en la parte superior, rejilla en la parte inferior
No soy el mayor fan del mundo de la diferenciación “1D” vs. “2D” de la cuadrícula frente a la caja flexible, solo porque encuentro que la mayor parte de mi uso diario de la cuadrícula es “1D” y es genial para eso. No quisiera que alguien piense que tiene que usar flexbox y no grid porque la cuadrícula es solo cuando se necesita 2D. Sin embargo, es una fuerte distinción que el diseño 2D es posible con la cuadrícula, aunque de alguna manera no lo es en flexbox.
La cuadrícula está mayormente definida en el elemento padre. En flexbox, la mayor parte del diseño (más allá de lo básico) ocurre en los niños.
/*
The flex children do most of the work
*/
.flexbox {
display: flex;
> div {
&:nth-child(1) { // logo
flex: 0 0 100px;
}
&:nth-child(2) { // search
flex: 1;
max-width: 500px;
}
&:nth-child(3) { // avatar
flex: 0 0 50px;
margin-left: auto;
}
}
}
/*
The grid parent does most of the work
*/
.grid {
display: grid;
grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr;
grid-template-rows: 100px repeat(3, auto) 100px;
grid-gap: 10px;
}La cuadrícula se superpone mejor. Hacer que los elementos se superpongan en flexbox requiere mirar cosas tradicionales, como márgenes negativos, transformaciones o posicionamiento absoluto para romper con el comportamiento flexible. Con la cuadrícula, podemos colocar elementos en líneas de cuadrícula superpuestas, o incluso dentro de las mismas celdas de cuadrícula exactas.
Flexbox en la parte superior, rejilla en la parte inferior
Grid es más resistente. Si bien la flexión de flexbox es a veces su fuerza, la forma en que se dimensiona un elemento flexible se vuelve bastante complicada. Es una combinación de width, min-width, max-width, flex-basis, flex-grow, y flex-shrink, sin mencionar el contenido incluido y cosas como white-space, así como los demás elementos de la misma fila. Grid tiene características interesantes que ocupan espacio, como unidades fraccionarias, y la capacidad del contenido para romper las cuadrículas, aunque, en términos generales, estamos configurando líneas de cuadrícula y colocando elementos dentro de ellas que se colocan en su lugar.
Flexbox puede alejar las cosas. Es una característica bastante única de flexbox que puede, por ejemplo, poner margin-right: auto; en un elemento y, si hay espacio, ese elemento empujará todo lo demás tan lejos como pueda.
Estos son algunos de mis tweets favoritos sobre el tema:
flexbox parece que hace lo que quieres
pero la cuadrícula es generalmente lo que quieres
– Viejo guardia Rupert (@ davatron5000) 25 de enero de 2019
Grid crea columnas y filas reales. El contenido se alineará de uno a otro, según lo solicite. Flexbox no lo hace. No solo en la segunda dimensión (de la que es más fácil hablar), sino también en la primera dimensión. Flexbox no es para la mayoría de las cosas para las que lo hemos estado usando.
– Jen Simmons (@jensimmons) 26 de enero de 2019
Qué tal esto:#Flexbox es para alineación. #CSSGrid es para el diseño.
Casi siempre es así como termino usándolos. Les permite preservar sus relaciones entre ellos. También permite que cada uno sea utilizado por su fuerza, aunque cada uno pueda hacer lo otro.
– Brian Haferkamp (@BrianHaferkamp) 25 de enero de 2019
Si comienza a restringir todos sus elementos flexibles con un ancho, la mayoría de las veces será más fácil usar la cuadrícula.
– Rachel Andrew (@rachelandrew) 25 de enero de 2019
Aquí hay otra diferencia, pero no es la forma favorita de describirlos, solo un conocimiento tonto y divertido:
flexbox necesita 2 pasadas para terminar
cuadrícula toma 3
entonces se podría decir, la cuadrícula es lenta y la caja flexible es rápida jajaja
– Adam Argyle (@argyleink) 25 de enero de 2019
Para mí, Grid tiene un gran diseño completo … cuadrículas … con más control sobre cómo se junta toda la página, mientras que flexbox me ayuda a posicionar y alinear (ya sea en una cuadrícula o no).
Para mí se trata de un propósito.
– Mandy Michael (@Mandy_Kerr) 25 de enero de 2019
La distinción entre los dos es a menudo borrosa, especialmente ahora que también tenemos “gap” para flexbox. Grid es más adecuado para algunos casos de uso específicos (2D obviamente, pero también cosas como elementos superpuestos) mientras que flexbox generalmente brilla en requisitos de diseño más simples pero comunes.
– Benjamin De Cock (@bdc) 25 de enero de 2019
Use la cuadrícula cuando ya tenga la estructura de diseño en mente y flexione cuando solo quiera que todo encaje. Diseño primero vs contenido primero.
– Beverly (@aszenitha) 25 de enero de 2019