Flexbox y grid
24 pasos en 5 series de CSS.
Flexbox y grid, que entre los dos jubilaron a una generación de hacks con float y tablas. Flexbox para una dimensión, grid para dos, y las reglas de dimensionado que deciden qué pasa cuando el contenido no cabe.
El posicionamiento lo cierra. Veinticuatro pasos, y lo que vale la pena internalizar es el dimensionado intrínseco: min-content y max-content explican más sorpresas de layout que cualquier otra cosa.
Flexbox
- Fundamentos de flexboxUn contenedor flex convierte a sus hijos en una fila que puedes controlar.
- Alineación en flexJustificar sobre el eje principal, alinear sobre el eje transversal.
- Saltar de línea y crecerDejar que los elementos flex pasen a nuevas líneas y cómo reparten el espacio sobrante.
- La propiedad abreviada flexCrecer, encoger y base, y los tres valores que vale la pena memorizar.
- Por qué un elemento flex no se encogeTodo elemento flex tiene un tamaño mínimo automático, y es la razón de que tu texto se desborde.
- Una barra de navegación con flexUna barra real: marca a la izquierda, enlaces al centro, cuenta empujada a la derecha.
Grid
- Columnas de gridUn grid definido por su lista de tracks de columna, con el contenido fluyendo en filas.
- Ubicar elementos en las líneas del gridAbarcar tracks por número de línea y dejar que el navegador llene los huecos.
- Áreas de grid con nombreDibujar el layout como una imagen y luego soltar elementos en celdas con nombre.
- Grids responsivos sin media queriesauto-fit y minmax te dan un grid de tarjetas responsivo en una sola declaración.
- Alinear dentro de un gridAlinear los tracks en el contenedor y los elementos dentro de su propia celda.
- Las filas que el grid crea por tiTú dimensionas las columnas; las filas siguen llegando, las hayas planeado o no.
- SubgridUn grid hijo que toma prestados los tracks del padre: las tarjetas se alinean por dentro.
Dimensionado
- Dimensionar según el contenidoTres palabras clave que le preguntan al contenido qué ancho quiere tener.
- Mantener la formaUna propiedad reemplaza el truco del porcentaje en padding-top que todos memorizaban.
- Texto en varias columnasColumnas de periódico, donde el navegador hace el balance.
Posicionamiento
- PosicionamientoRelative, absolute y fixed, y el bloque contenedor que los ancla.
- Sticky, fixed y el bloque contenedorDónde cae un elemento absolute depende por completo de qué ancestro está posicionado.
- Encabezados sticky y apilamientoSticky vive entre relative y fixed; z-index ordena lo que se superpone.
- Por qué z-index a veces no hace nadaz-index solo ordena hermanos dentro del mismo contexto de apilamiento, y muchas cosas crean uno.
- Los floats y para qué siguen sirviendoLos floats perdieron el trabajo de layout y conservaron aquel para el que nacieron: envolver texto.
- Cuatro maneras de centrarLas recetas de centrado que vale conocer, del truco del margen a place-content.
- Un scroll que se ajustaUn carrusel que aterriza en un elemento en vez de frenar entre dos.
Bis
- dashboard_layout.cssUn cascarón de app completo: áreas de grid, encabezado sticky, paneles con scroll, fallback responsivo.