Continúo publicando artículos de Rachel Andrew sobre las características de la tecnología Flexbox CSS
Artículos anteriores de la serie:
- Qué sucede al crear un contenedor Flexbox .
- Todo lo que necesita saber sobre la alineación en Flexbox .
- Flexbox: ¿qué tamaño tiene esta caja flexible? .
Estamos al final de mi serie Flexbox aquí en Smashing Magazine . En esta publicación, voy a pasar un tiempo pensando en cuáles son realmente las opciones para usar Flexbox , dado que ahora tenemos CSS Grid Layout , le daré algunas sugerencias sobre qué puede usar cuándo y cómo.
A principios de esta serie
Si aún no has seleccionado otros artículos, esta es esencialmente la publicación final, así que échales un vistazo primero. Comencé describiendo lo que sucede cuando se crea un contenedor flexible . En el segundo artículo de la serie, analicé la alineación y cómo alineamos los elementos a lo largo de los ejes principal y transversal en flexbox . En el tercer artículo, comparto cómo funciona el cambio de tamaño en Flexbox y cómo el navegador determina qué tan grande debe ser el flex. Ahora que sabemos exactamente cómo funciona Flexbox , podemos darnos la vuelta para pensar en los casos de uso para los que es mejor.
¿Debo usar Grid o Flexbox?
Esta sigue siendo la pregunta principal que me hacen cuando me entreno en el diseño, y en general creo que a medida que las personas se acostumbran cada vez más a trabajar con nuevos métodos, esto se convierte en una pregunta que debe hacerse con menos frecuencia. A medida que crece la experiencia, comprenderá qué método de diseño utilizar.
Sin embargo, si recién está comenzando a comprender este pensamiento, recuerde que CSS Grid Layout y Flexbox son CSS. Si especificó display: grid o display: flex , a menudo usa más en común que diferencias. Tanto Grid como Flexbox utilizan propiedades que forman parte de la especificación de Alineación de caja ; ambos se basan en conceptos detallados en la especificación CSS de tamaño intrínseco y extrínseco. .
Preguntar si su diseño debe usar Grid o Flexbox es como preguntar si su diseño debe usar tamaño de fuente o color. Probablemente deberías usar ambos si es necesario. Y nadie te perseguirá si usas el incorrecto.
Por lo tanto, no elegimos entre Vue.js y React , Bootstrap o Foundation . Usamos CSS para completar el diseño, y necesitamos usar las partículas CSS que tienen más sentido para la parte específica de nuestro diseño en el que estamos trabajando. Revise cada componente y decida qué es mejor para él o qué combinación de elementos es mejor para él.
Puede ser un Grid , o puede ser un Flexbox . Este puede ser un contenedor de cuadrícula externo en el que algunos elementos de la cuadrícula se vuelven flexibles o reversibles. No hay problema en anidar el elemento flexible si es necesario para su proyecto.
¿Qué es realmente Flexbox?
La especificación de Flexbox describe el método de diseño de la siguiente manera:
"El diseño flexible se parece al diseño de bloques . Carece de muchas más propiedades complejas orientadas al texto o al documento que se pueden usar en el diseño de bloques, como flotantes y columnas . En cambio, obtuvo herramientas simples y potentes para la asignación de espacio y la alineación de contenido de una manera, qué aplicaciones web y páginas web complejas han necesitado durante mucho tiempo ".
Creo que la frase clave aquí es "asignación de espacio y alineación de contenido". Flexbox se trata de tomar un montón de artículos (que tienen diferentes tamaños) y ponerlos en un contenedor (que en sí mismo puede ser de tamaño variable). Flexbox es suave. Intenta crear el mejor diseño para nuestros elementos, dando a los elementos más grandes más espacio y a los elementos más pequeños menos espacio, preservando así la legibilidad del contenido.
Si las personas encuentran que Flexbox es complejo y críptico, esto es a menudo porque intentan usar Flexbox como un sistema de cuadrícula , tratando de recuperar el control sobre el tamaño y la distribución del espacio. Cuando hace esto, Flexbox puede parecer extraño y complicado, ya que lucha con lo que hace Flexbox , es decir con su flexibilidad inherente
Por lo tanto, las plantillas que son muy adecuadas para diseños flexibles son aquellas en las que no estamos tan interesados en tener el tamaño perfecto para cada elemento. Solo queremos que estos elementos aparezcan uno al lado del otro.
También hay patrones en los que desea tener saltos de línea, sin embargo, no necesita una grilla estricta. Si tomamos el ejemplo original de Cuadrícula vs Flexbox , donde usamos la sintaxis de autocompletar repetida en la cuadrícula, y luego el contenedor flexible de ajuste de línea, veremos inmediatamente la diferencia entre los dos métodos.
En el ejemplo de cuadrícula , los elementos de cuadrícula se organizan en filas y columnas. Cuando el número de columnas de una pista cambia (según el espacio), los elementos siempre van a la siguiente celda de cuadrícula disponible. De hecho, no hay forma de solicitar que un elemento de cuadrícula rodee una pista para completar un escenario de flujo automático si hay otras celdas vacías.
En el ejemplo flexible , los elementos resultantes separan el espacio que queda entre ellos, por lo que no utilizamos la alineación horizontal y vertical.
Si tenemos la base flexible configurada en automático , y cualquiera de los elementos flexibles aumenta, entonces el resto también contará con espacio adicional para que la alineación pueda ser diferente de una línea a otra.
Este es un ejemplo muy vívido de dónde nos gustaría usar Flexbox sobre el diseño de cuadrícula . Si queremos que los elementos se envuelvan, pero ocupamos el espacio que necesitan, línea por línea. Esto es muy diferente de la cuadrícula. Plantillas como esta pueden ser un conjunto de etiquetas (una o dos palabras que desea mostrar bien como un conjunto de elementos) que ocupan el espacio que necesita, en lugar de insertarse firmemente en una cuadrícula estricta.
Actualmente, Flexbox es la mejor manera de centrar vertical y horizontalmente un elemento dentro de un contenedor.
En el futuro (si los navegadores admiten propiedades de Alineación de caja fuera del diseño flexible), podemos hacer esto sin agregar display: flex al contenedor. Por el momento, sin embargo, todo lo que necesita hacer es una línea CSS adicional, lo cual no es un problema.
Flexbox funciona muy bien con pequeños componentes unidimensionales. Los conjuntos de campos de formulario, iconos u otra información pueden organizarse fácilmente y ser flexibles sin tener que dimensionar cuidadosamente cada elemento.
También puede seleccionar Flexbox en un escenario donde el contenido debe llevarse al fondo del contenedor, evitando que aparezca. En el siguiente ejemplo, convierto el contenedor en un contenedor flexible, mostrando el contenido como una columna, y luego dejo que crezca el medio, empujando el pie de página hacia abajo del componente.
Durante el desarrollo, encuentro que Flexbox es útil para muchas tareas pequeñas, realizar la alineación correctamente y distribuir espacio entre los elementos. Ciertamente, puede usar un contenedor de malla unidimensional para algunas de estas tareas, y no se preocupe por lo que decida hacer.
Sin embargo, creo que Flexbox será el mejor en una situación en la que necesite agregar elementos adicionales que no esperaba en mi diseño. Por ejemplo, si tengo un componente de navegación usando la cuadrícula , crearía suficientes pistas para todos los elementos, ya que no quisiera que se creara una nueva línea si tuviera "demasiados" elementos. Con flexbox lo suficientemente largo, permitiría que los elementos sean flexibles con base flexible 0 (o auto ), luego los elementos mismos dejarían al nuevo compañero en la línea, liberando espacio para ello.
¿Cuándo no deberías usar Flexbox?
Analizamos algunas consideraciones para las cuales creo que debería preferir el diseño de Flexbox en lugar de Grid , por lo que ahora podemos ver algunos de los lugares donde Flexbox podría no ser la mejor opción. Ya vimos nuestro ejemplo de Flexbox versus cuadrícula con elementos alineados horizontal y verticalmente contra elementos que ocupan espacio línea por línea. Y esta diferencia es lo primero a considerar.
El ejemplo de cuadrícula tiene un diseño bidimensional. Diseño por fila y columna al mismo tiempo.
Ejemplo Flexbox es un diseño unidimensional. Empacamos líneas flexibles, pero la colocación en el espacio ocurre línea por línea. Cada línea actúa esencialmente como un nuevo contenedor flexible en la dirección Flex.
Por lo tanto, si su componente necesita un diseño bidimensional, sería mejor utilizar una cuadrícula en lugar de Flexbox . No importa si es un componente grande o pequeño. Si toma una cosa de este artículo, elimine la idea de que, por alguna razón, la cuadrícula está diseñada solo para el diseño de la página principal y Flexbox para los componentes. Puede tener un componente pequeño que requiera un diseño bidimensional y una estructura de página principal que se adapte mejor a un diseño unidimensional.
Otro buen lugar donde una cuadrícula podría considerarse la mejor solución es usar el ancho o establecer la base flexible como la unidad de longitud de sus elementos flexibles para alinearlos con otra línea de elementos flexibles o simplemente limitar la flexibilidad de alguna manera. Muy a menudo, esto indica que realmente necesita un método de diseño bidimensional o que el control del contenedor de cuadrícula es más adecuado para su diseño.
Por ejemplo, podríamos hacer que nuestro diseño flexible se parezca más a una cuadrícula , limitando la flexibilidad de nuestros elementos. Establecer flex-grow en 0 y calcular el tamaño de los elementos en porcentaje, de forma similar a cómo determinamos el tamaño de los elementos en una "cuadrícula" flotante. Si te encuentras haciendo esto, te sugiero que un diseño de cuadrícula sea el mejor enfoque, ya que está diseñado para este tipo de diseño.
Con todo lo dicho, recuerde que muy a menudo no hay una respuesta clara correcta o incorrecta. A veces, lo único que puede hacer es probar diferentes métodos y ver qué funciona mejor para el componente. Recuerde que también puede cambiar los métodos de diseño usando Flexbox en un punto de interrupción y Grid a otro.
Y así, ¡acurrucarse!
Espero que esta serie Flexbox haya sido útil y haya demostrado cómo comprender algunos algoritmos de alineación y calibración para elementos flexibles facilita la vida con ellos.
Si tiene preguntas no resueltas o tiene una plantilla que no parece tener una respuesta obvia en términos del método de diseño utilizado, deje un comentario.