CSS Flexbox
El módulo flexbox permite crear diseños más eficientes de lo que permite "position" y "float".
Flexbox controla la alineación de sus elementos hijos, el ancho y el alto para ocupar el espacio disponible.
El posicionamiento de elementos es unidireccional, es decir que podemos trabajar con una dirección vertical u horizontal, a diferencia de Grid que controla las dos direcciones.
Algunos conceptos importantes:
Contenedor: es el elemento padre al cual es asignado un display: flex;
Item flexible: es cada uno de los hijos del contenedor.
Eje principal: es el eje que corresponde a la dirección asignada con flex-direction que puede ser row (predeterminada) o column.
Eje secundario: es el eje perpendicular al eje principal.
Propiedades del contenedor:
display:
| Valor | Descripción |
|---|---|
| flex | Aplican el diseño flexible a sus hijos y se comporta como un elemento en bloque. |
| inline-flex | Aplican el diseño flexible a sus hijos y se comporta como un elemento en línea. |
flex-direction: (modifica el eje principal)
| Valor | Descripción |
|---|---|
| row | Los hijos se posicionan de forma horizontal. (valor predeterminado) |
| column | Los hijos se posicionan de forma vertical. |
| row-reverse | Los hijos se posicionan de forma horizontal e invierten el orden original. |
| column-reverse | Los hijos se posicionan de forma vertical e invierten el orden original. |
flex-wrap:
| Valor | Descripción |
|---|---|
| wrap | Los ítems son distribuidos en varias líneas. |
| nowrap | Los ítems son distribuidos en una sola línea. |
| wrap-reverse | Los ítems son distribuidos en varias líneas e invierte el inicio y el fin del eje principal. |
flex-flow:
Atajo de flex-direction y flex-wrap por ejemplo: flex-flow: column wrap;
justify-content: (distribución del espacio en el eje principal)
| Valor | Descripción |
|---|---|
| flex-start | Alinea los ítems al inicio. |
| flex-end | Alinea los ítems al final. |
| center | Alinea los ítems al centro. |
| space-between | El primer ítem al inicio, el último al final y el resto distribuidos uniformemente. |
| space-around | Distribuye los ítems uniformemente y todos tienen el mismo espacio a su alrededor. |
align-items: (controla la alineación respecto del eje secundario)
| Valor | Descripción |
|---|---|
| flex-start | Los ítems se alinean al inicio en base al eje secundario. |
| flex-end | Los ítems se alinean al final en base al eje secundario. |
| center | Los ítems se alinean en el centro en base al eje secundario. |
| stretch | Los ítems llenarán todo el espacio vertical. |
| baseline | Los ítems están alineados en la línea de base del eje secundario. |
align-content:
Ajusta las líneas dentro del contenedor cuando hay espacio extra en el eje secundario.
No tiene efecto en contenedores de una sola línea.
| Valor | Descripción |
|---|---|
| flex-start | Alinea los ítems al inicio. |
| flex-end | Alinea los ítems al final. |
| center | Alinea los ítems al centro. |
| space-between | El primer ítem al inicio, el último al final y el resto distribuidos uniformemente. |
| space-around | Distribuye los ítems uniformemente y todos tienen el mismo espacio a su alrededor. |
| stretch | Estira los ítems para que ocupen el eje secundario completo. |
row-gap: y column-gap:
Espaciado entre los ítems en líneas y columnas. Es una alternativa al uso de padding o margin.
gap:
Atajo de row-gap y column-gap. Asignando un solo valor corresponde a las dos posibilidades y asignando dos valores el primero es para row-gap y el segundo para column-gap.
Propiedades de los ítems:
flex-grow:
Factor de crecimiento en relación a los demás hermanos en el espacio disponible. Valor por defecto: 0
flex-shrink:
Factor de decrecimiento en relación a los demás hermanos en el espacio disponible. Valor por defecto: 1
flex-basis:
Tamaño base de los ítems antes de aplicarle la distribución de espacio. Valor por defecto: auto.
flex:
Atajo de flex-grow flex-shrink y flex-basis.
align-self:
Aplica una alineación individual del ítem en el eje secundario.
order:
Ordena los ítems en base al valor asignado a esta propiedad.