Flexbox¶
Flexbox es un método de diseño de página unidimensional para compaginar elementos en filas o columnas. Los elementos de contenido se ensanchan para rellenar el espacio adicional y se encogen para caber en espacios más pequeños. Anteriormente, para ubicar elementos en pantallas se utilizaba el método flotante o de floats. En el futuro, todo hace indicar que se usará el método grid.
¿Por qué usamos flexbox?¶
Durante mucho tiempo, las únicas herramientas fiables con compatibilidad cruzada entre navegadores disponibles para crear diseños CSS fueron cosas como la flotación. Están bien y funcionan, pero de alguna manera también limitan bastante y frustran.
Con tales herramientas resulta difícil, si no imposible, lograr obtener en cualquier forma conveniente y flexible un diseño de página sencillo con unos requisitos como los siguientes:
- Centrar verticalmente un bloque de contenido dentro de su elemento padre.
- Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.
- Hacer que todas las columnas en una compaginación en columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.
¿Cómo se usa flexbox?¶
Dado que flexbox es un módulo completo y no una sola propiedad, implica muchas cosas, incluido su conjunto completo de propiedades. Algunos de ellos están destinados a establecerse en el contenedor (elemento principal, conocido como "contenedor flexible"), mientras que otros están destinados a establecerse en los elementos secundarios (dichos "elementos flexibles").
Si el diseño "regular" se basa en direcciones de flujo en bloque y en línea, el diseño flexible se basa en "direcciones de flujo flexible". Los elementos se distribuirán siguiendo el eje ( main-axis: main-start o main-end) o la cruz (de cross-start o cross-end).
- eje principal : el eje principal de un contenedor flexible es el eje principal a lo largo del cual se disponen los elementos flexibles. Cuidado, no es necesariamente horizontal; Depende de la flex-direction
- inicio principal | main-end : los elementos flexibles se colocan dentro del contenedor comenzando desde el inicio principal y yendo al extremo principal.
- tamaño principal : el ancho o la altura de un elemento flexible, lo que esté en la dimensión principal, es el tamaño principal del elemento. La propiedad de tamaño principal del elemento flexible es la propiedad 'ancho' o 'alto', cualquiera que esté en la dimensión principal.
- eje transversal : el eje perpendicular al eje principal se denomina eje transversal. Su dirección depende de la dirección del eje principal.
- inicio cruzado | extremo cruzado : las líneas flexibles se llenan con artículos y se colocan en el contenedor comenzando en el lado de inicio cruzado del contenedor flexible y yendo hacia el lado del extremo cruzado.
- tamaño cruzado : el ancho o la altura de un elemento flexible, lo que esté en la dimensión cruzada, es el tamaño cruzado del elemento. La propiedad de tamaño cruzado es cualquiera de 'ancho' o 'alto' que esté en la dimensión cruzada.
Propiedades para el padre¶
display¶
Esto define un contenedor flexible; en línea o bloque dependiendo del valor dado. Permite un contexto flexible para todos sus hijos directos. Ten en cuenta que las columnas CSS no tienen efecto en un contenedor flexible.
.container{
display:flex;
}
flex-direction¶
Esto establece el eje principal, definiendo así la dirección en que se colocan los artículos flexibles en el contenedor flexible. Flexbox es (aparte del envoltorio opcional) un concepto de diseño de una sola dirección. Piense en los elementos flexibles como dispuestos principalmente en filas horizontales o columnas verticales.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap¶
De forma predeterminada, todos los elementos flexibles intentarán encajar en una línea. Puede cambiar eso y permitir que los elementos se ajusten según sea necesario con esta propiedad.
- nowrap(predeterminado): todos los elementos flexibles estarán en una línea
- wrap: los elementos flexibles se ajustarán a varias líneas, de arriba a abajo.
- wrap-reverse: los elementos flexibles se ajustarán a varias líneas de abajo hacia arriba.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow¶
Esta es una forma abreviada de las propiedades flex-direction y flex-wrap, que juntas definen los ejes principal y transversal del contenedor flexible. El valor predeterminado es row nowrap.
.container {
flex-flow: column wrap;
}
justify-content¶
Esto define la alineación a lo largo del eje principal. Ayuda a distribuir el espacio libre adicional sobrante cuando todos los elementos flexibles de una línea son inflexibles o son flexibles pero han alcanzado su tamaño máximo. También ejerce cierto control sobre la alineación de los elementos cuando desbordan la línea.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
align-items¶
Esto define la alineación a lo largo del eje principal. Ayuda a distribuir el espacio libre adicional sobrante cuando todos los elementos flexibles de una línea son inflexibles o son flexibles pero han alcanzado su tamaño máximo. También ejerce cierto control sobre la alineación de los elementos cuando desbordan la línea.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
align-content¶
Esto alinea las líneas de un contenedor flexible cuando hay espacio adicional en el eje transversal, de forma similar a como justify-content se alinean los elementos individuales dentro del eje principal.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Propiedades para el hijo¶
order¶
De forma predeterminada, los elementos flexibles se presentan en el orden de origen. Sin embargo, la orderpropiedad controla el orden en que aparecen en el contenedor flexible.
.item {
order: 5; /* default is 0 */
}
flex-grow¶
Esto define la capacidad de crecimiento de un elemento flexible si es necesario. Acepta un valor sin unidades que sirve como proporción. Determina qué cantidad de espacio disponible dentro del contenedor flexible debe ocupar el artículo.
Si todos los elementos se han flex-grow establecido en 1, el espacio restante en el contenedor se distribuirá por igual a todos los niños. Si uno de los hijos tiene un valor de 2, ese hijo ocuparía el doble de espacio que cualquiera de los otros (o lo intentará, al menos).
.item {
flex-grow: 4; /* default 0 */
}
flex-shrink¶
Esto define la capacidad de que un elemento flexible se encoja si es necesario.
.item {
flex-shrink: 3; /* default 1 */
}
Chuleta¶
Recuerda que tienes disponible multitud de recursos sobre esta materia. He dejado una cheatsheet es para que la tengas a mano.
Actividades¶
- AC 316 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox. La sección principal debe ocupar el máximo espacio disponible en ancho y alto del navegador. No debe mostrarse barra de scroll, ni vertical ni horizontal
- AC 317 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox.
- AC 318 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox. No se debe mostrar barra de scroll alguna. Deben mostrarse tres secciones por fila.
- AC 319 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox. No tiene que mostrarse al alto completo que permita el navegador. Simplemente se mostrará una fila en la parte superior de la página.
- AC 320 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox. No debe haber barras de scroll. Se debe ocupar el alto completo del navegador.
- AC 321 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox. No debe haber barras de scroll. Se debe ocupar el alto completo del navegador.
- AC 322 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox. No debe haber barras de scroll. Se debe ocupar el alto completo del navegador.
- AC 323 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox. No debe haber barras de scroll. Se debe ocupar el alto completo del navegador.
- AC 324 (RA1 / CE1b / IC1/ 3p) Realiza un diseño de secciones que se asemeje lo máximo posible al siguiente, usando Flexbox. No debe haber barras de scroll. Se debe ocupar el alto completo del navegador.
