Flexbox
Flexbox resolvió, de un plumazo, décadas de trucos incómodos para alinear elementos. Si alguna vez has querido centrar algo vertical y horizontalmente y te ha costado más de lo esperado, Flexbox es la respuesta.
Activar Flexbox
Todo empieza en el contenedor (el padre), no en los hijos:
Convierte a todos los hijos directos en "elementos flexibles", alineados por defecto en fila y sin saltar de línea.
Los dos ejes de Flexbox
Flexbox trabaja siempre con dos ejes: el eje principal (main axis, horizontal por defecto) y el eje cruzado (cross axis, vertical por defecto). Todas las propiedades de alineación se reparten entre estos dos ejes.
Alinea a lo largo del eje principal: flex-start, center, flex-end, space-between, space-around.
Alinea a lo largo del eje cruzado: flex-start, center, flex-end, stretch.
Cambia el eje principal: row (por defecto), column, row-reverse, column-reverse.
El espacio entre elementos, sin necesidad de márgenes manuales. Funciona tanto en fila como en columna.
Este patrón — logo a un lado, enlaces al otro, todo centrado verticalmente — es probablemente el uso más común de Flexbox en la web real. De hecho, es exactamente cómo está construida la cabecera de este mismo curso.
Que los elementos salten de línea: flex-wrap
Por defecto, Flexbox intenta encajar todo en una sola línea, encogiendo los elementos si hace falta. Con wrap, en cambio, los elementos que no quepan saltan a la siguiente línea, manteniendo su tamaño.
Casi siempre que uses Flexbox para una fila de tarjetas o imágenes, querrás
añadir flex-wrap: wrap. Sin ella, en pantallas
pequeñas los elementos se irán encogiendo hasta verse aplastados en vez de
organizarse en varias líneas.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué propiedad activa Flexbox en un contenedor?
2. ¿Qué propiedad reparte los elementos con espacio entre ellos, tipo logo-izquierda/menú-derecha?
3. ¿Qué hace flex-wrap: wrap?