Chuleta de flexbox y grid (interactiva) con Tailwind | We.Inc
Todas las propiedades de flexbox y CSS grid en un contenedor en vivo que puedes modificar, un generador de grid-template-areas, una guía para decidir entre flex o grid y las clases de Tailwind.
Chuleta de flexbox y grid
Flexbox coloca los elementos en una sola dirección, en fila o en columna, y es lo mejor para barras de herramientas, barras de navegación y centrar. Grid coloca los elementos en filas y columnas a la vez y va bien para maquetar páginas y galerías de tarjetas. Pon display: flex o display: grid en el padre y luego usa las propiedades de abajo; cada una actualiza aquí un contenedor en vivo.
¿Flexbox o grid?
Maquetación
Elige
Centrar una cosa dentro de una caja
Cualquiera: grid con place-items: center es lo más corto
Una fila de botones o enlaces de navegación
Flexbox
Elementos de ancho desconocido que deben pasar a otra línea
Flexbox con flex-wrap
Tarjetas en columnas iguales
Grid con repeat(auto-fill, minmax())
Cabecera, barra lateral, contenido principal, pie
Grid con grid-template-areas
Alinear elementos entre filas y columnas
Grid
Dos contenedores en vivo, uno flex y otro grid, con un control para cada propiedad del contenedor y para un elemento elegido. Cada cambio muestra el CSS y la clase de Tailwind. Debajo, pinta una maquetación de página en el generador de grid-template-areas y copia el resultado. Las tablas de referencia se imprimen limpias.
Usa los controles de flexbox para cambiar el contenedor y luego elige un elemento para probar grow, shrink, basis, order y align-self.
Haz lo mismo en el área de pruebas de grid, incluidos los spans que estiran un elemento a lo largo de varias columnas o filas.
En el generador de áreas, elige un nombre de área y haz clic en las celdas para pintarlas. El CSS del contenedor y de cada área aparece debajo.
Pulsa Imprimir para tener las tablas de propiedades en papel o en PDF.
Empieza usando gap para el espacio entre elementos en lugar de márgenes. Solo añade espacio entre los elementos, nunca en los bordes exteriores.
flex: 1 en cada elemento crea columnas de igual ancho que siguen respondiendo a su contenido; grid con columnas 1fr ignora el ancho del contenido.
Usa order y la colocación en grid solo para ajustes visuales. Quienes usan el teclado o un lector de pantalla siguen el orden del código, así que el orden del HTML debe seguir teniendo sentido.
minmax(0, 1fr) en lugar de 1fr evita que una palabra larga o una imagen ancha haga una columna del grid más ancha de lo que le corresponde.
Preguntas frecuentes
¿Cuál es la diferencia entre justify-content y align-items?
justify-content actúa sobre el eje principal, que en una fila flex va de izquierda a derecha. align-items actúa en perpendicular, de arriba abajo en una fila. Cambia flex-direction a column y las dos intercambian sus direcciones físicas, por eso a veces parece que para centrar se usa la propiedad equivocada.
¿Por qué justify-content no hace nada?
Solo tiene efecto cuando sobra espacio en el eje principal. Si un elemento tiene flex-grow: 1 o los elementos llenan la fila, no queda nada que repartir. En grid, justify-content mueve todo el conjunto de pistas, mientras que justify-items alinea los elementos dentro de sus propias celdas.
¿Cómo funcionan las grid-template-areas?
Dibujas la maquetación como cadenas de texto, una por fila, con un nombre para cada celda, por ejemplo "header header" "side main". Después, cada hijo reclama un nombre con grid-area: header. Las áreas deben formar rectángulos, y un punto marca una celda vacía.
¿Puedo usar flexbox dentro de grid?
Sí, y es habitual. Grid coloca las grandes regiones o las tarjetas, y flexbox ordena el contenido dentro de cada una, como un icono junto a una etiqueta o un pie fijado en la parte inferior de una tarjeta.
¿Se puede usar gap en flexbox?
Sí. Todos los navegadores principales actuales admiten gap en los contenedores flex además de en grid, así que el viejo truco de los márgenes negativos en el contenedor ya no hace falta.
Los dos ejes
Todo contenedor flex tiene un eje principal, definido por flex-direction, y un eje transversal perpendicular a él. Las propiedades que empiezan por justify actúan sobre el eje principal y las que empiezan por align, sobre el eje transversal. Cuando lo tienes claro, la mayoría de los enigmas de flexbox se reducen a saber a qué eje te refieres.
Grid, en cambio, tiene un par de ejes fijo: el inline (normalmente horizontal) y el de bloque (normalmente vertical). justify-* alinea a lo largo del eje inline y align-* a lo largo del eje de bloque, tanto para el grid entero como para los elementos dentro de sus celdas.
Cómo deciden su tamaño los elementos flex
Cada elemento parte de su flex-basis, o del tamaño de su contenido cuando basis es auto. Si queda sitio en la línea, el espacio sobrante se reparte en proporción a flex-grow. Si la línea está demasiado llena, los elementos se encogen en proporción a flex-shrink multiplicado por su basis.
La forma abreviada flex: 1 significa grow 1, shrink 1, basis 0%, así que todos los elementos acaban con el mismo ancho sea cual sea su contenido. flex: auto mantiene el tamaño del contenido como punto de partida, de modo que las etiquetas más largas reciben cajas más anchas.
Grids responsive sin media queries
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) mete tantas columnas de al menos 220 píxeles como permita el contenedor y las estira para llenar la fila. Las tarjetas pasan de una columna en un móvil a cuatro o cinco en una pantalla ancha sin ningún breakpoint.
auto-fit se comporta igual hasta que hay menos elementos que columnas: auto-fill conserva las columnas vacías, mientras que auto-fit las colapsa para que los elementos existentes se estiren a lo largo de la fila.