css - ¿Cuáles son las áreas cubiertas por Flexbox que son difíciles o imposibles de lograr con Grid?

css-grid

Question

Se destaca que Flexbox es para 1-D y Grid para 2-D, pero no he encontrado una explicación clara de por qué Grid no se pudo usar para 1-D y reemplazar a Flexbox. Lo más cerca que llegué es

Pero también podría argumentar que el diseño puramente 1D como este es más poderoso en Flexbox, porque Flexbox nos permite mover esos elementos más fácilmente (por ejemplo, moverlos a un lado u otro, cambiar su orden, espaciarlos de manera uniforme, etc.).

Utilizo Grid y Flexbox para el diseño básico: una ubicación general de los cuadros en la página y algunos dinámicos, generalmente apilados. Los estéticos (tostadores, modales, ...) se gestionan a través de un framework. Todavía no he encontrado un caso en el que Grid no haya podido reemplazar Flexbox fuera de la caja (es decir, sin gimnasia CSS avanzada o mucho código).

Para tomar el ejemplo de la cita anterior, todos los "movimientos" mencionados están disponibles directamente en Grid, generalmente con la misma semántica que en Flexbox.

¿Cuáles son las áreas fundamentales cubiertas por Flexbox que son difíciles o imposibles de manejar con Grid?

EDITAR: la compatibilidad con el navegador no es importante (solo uso navegadores de hoja perenne y puedo cambiar si es necesario)

Answer 1

Ventaja Flexbox

Aquí hay 9 áreas donde flexbox sale por delante de Grid (Nivel 1) :

1. Centrado de artículos envueltos. Imagina cinco elementos flexibles. Sólo cuatro por fila. El quinto se envuelve. Ese quinto se puede alinear fácilmente en toda la fila con justify-content . Trate de centrar este quinto elemento en un contenedor de cuadrícula. No es un asunto simple.

   Alinear elementos de la cuadrícula en toda la fila / columna (como pueden hacerlo los elementos flexibles)

   ¿Cómo centrar los elementos en la última fila en CSS Grid?

2. Envase. Los elementos flexibles de longitud variable no tienen problemas de envoltura. Trate de obtener elementos de cuadrícula de longitud variable para envolver. Imposible.

   ¿Cómo conseguir elementos de cuadrícula de diferentes longitudes para envolver?

3. Márgenes automáticos. Los artículos flexibles se pueden colocar, empacar y separar en todo su contenedor con márgenes auto . Los elementos de la cuadrícula, sin embargo, se limitan a sus pistas, disminuyendo en gran medida la utilidad de los márgenes auto .

   ¿Pueden funcionar los márgenes automáticos en CSS Grid como lo hacen en Flexbox?

4. Mínimo, Máximo, Predeterminado - todo en uno. Configurar el min-width max-width predeterminado de un elemento flexible es fácil. ¿Cómo se pueden establecer las tres longitudes en una columna o fila de la cuadrícula? Ellos no pueden

   Configuración de la longitud mínima, máxima y predeterminada de una columna / fila de cuadrícula

5. Pie de página pegajoso / encabezado. Es mucho más simple y más fácil fijar un pie de página o encabezado con flexbox.

   ¿Cómo puedo tener un pie de página adhesivo con mi diseño de cuadrícula CSS?

6. Consumiendo el espacio restante. Un elemento flexible puede consumir el espacio restante con flex-grow . Los elementos de la rejilla no tienen tal función.

   Haga que el elemento de la cuadrícula use el espacio restante como elemento flexible con flex-grow: 1

   ¿Cómo hacer que los elementos de la última fila consuman el espacio restante en CSS Grid?

   Cómo hacer que CSS Grid sea la última fila para ocupar el espacio restante

7. Contracción. Flex tiene flex-shrink . Grid tiene ... nada.

   Reduce los elementos de la cuadrícula al igual que los elementos flexibles en css

8. Limitar el recuento de columnas en un diseño dinámico. Con flexbox, la creación de una cuadrícula de dos columnas de ajuste que permanece fija en dos columnas a través de los tamaños de pantalla no es un problema. En Grid, a pesar de tener todas estas funciones geniales, como repeat() , auto-fill y minmax() , no se puede hacer.

   Hacer CSS Grid auto-completar solo 2 columnas

   Columnas de CSS en cuadrícula max sin consultas de medios

9. Creando espacio entre el primer y el último elemento. En un contenedor de cuadrícula con un número variable de columnas, no es fácil agregar una primera y una última columna vacía. Los márgenes, el relleno, las columnas y los pseudo elementos tienen sus limitaciones. Es simple y fácil con flexbox.

   Agregar espacio antes y después del primer y último elemento de la cuadrícula

Answer 2

Flexbox y CSS grid son dos características diferentes y no estoy de acuerdo en decir que uno puede reemplazar a otro o que CSS grid es un superconjunto de flexbox.

Tu dijiste:

No he encontrado una explicación clara de por qué Grid no se pudo usar para 1-D y reemplazar Flexbox.

Aquí hay un ejemplo básico de flexbox que involucra un ajuste que no puede lograr (o probablemente sea difícil de lograr) usando la cuadrícula CSS. Reduzca el tamaño de la ventana y vea cómo se comportarán los elementos.

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>span {
  border: 1px solid;
  padding: 10px;
  flex-grow: 1;
}

<div class="box">
  <span>some text very long here some text very long here </span>
  <span>text here</span>
  <span>A</span>
  <span>B</span>
</div>

Este es un diseño 1-D donde cada línea puede tener elementos con un tamaño diferente dependiendo del espacio libre sin estar dentro de una cuadrícula 2D. Será difícil lograr el mismo resultado usando CSS-grid.

Básicamente, flexbox es más adecuado cuando se trata de contenido multilínea / multirrugas en una dirección, mientras que la cuadrícula CSS es más sobre una cuadrícula con filas y columnas . Por supuesto, cuando se trata de una sola línea, se puede considerar una cuadrícula 2D como 1D, por lo que flexbox y CSS grid pueden lograr lo mismo.

Es como comparar una tabla con solo un tr y un td múltiple con un conjunto de elementos de inline-block en línea dentro de una línea, PERO cuando se trata de ajuste y múltiples tr está claro que la tabla y inline-block son diferentes.

Vale la pena señalar que puede lograr lo que quiera con cualquier técnica en general. En el pasado, Flexbox no estaba allí y los desarrolladores podían crear un diseño utilizando float (Boostrap es el mejor ejemplo). Luego flexbox viene con características más potentes para facilitar las cosas. Lo mismo para la cuadrícula CSS y para las características futuras.

Aquí hay un ejemplo: https://drafts.csswg.org/css-align-3/

En este borrador se habla de una mejora futura de la alineación en la que podemos considerar jutify-content , align-items , etc., sin siquiera utilizar flexbox o la cuadrícula CSS, sino directamente en los elementos de bloque.

Si se implementa, ¿esto hará que Flexbox y CSS Grid sean inútiles? No lo creo.

Answer 3

Probablemente debería señalar que Grid es MUCHO más nuevo que Flexbox y, por lo tanto, podría ser un reemplazo en cierta medida. Al igual que Flexbox reemplazó el caso de uso típico de float (no el uso previsto).

Voy a comenzar con esto diciendo que rara vez NECESITO las complejidades / capacidades de Grid, así que todavía uso Flexbox para la mayoría de las cosas.

Sin embargo, en mi experiencia, las capacidades de flex-wrap , especialmente con tamaños de pantalla variables, es un lugar en el que siento que Grid no es un gran reemplazo.