En esta hoja de estilo, se ha definido el contenedor. La propiedad display: flex habilita la flexbox. Los elementos se distribuyen de izquierda a derecha, ya que no lo hemos definido de otra manera. También es posible hacerlo mediante cinco opciones distintas, configurables con el comando justify-content:
- flex-start: justificado a la izquierda
- flex-end: justificado a la derecha
- center: justificado en el centro
- space-around: distribuye uniformemente el espacio alrededor de las cajas
- space-between: distribuye uniformemente el espacio entre las cajas
El resto del código hasta este punto solo es estético y no tiene nada que ver con las cajas flexibles en sí.
El modelo CSS Flexbox parte de la alineación horizontal, aunque también es posible organizar los elementos en una columna. Además, se puede invertir la dirección, de izquierda a derecha o de abajo a arriba. Para ello, se utiliza el comando flex-direction:
- row: de izquierda a derecha
- row-reverse: de derecha a izquierda
- column: de arriba abajo
- column-reverse: de abajo a arriba
El comando justify-content: flex-end no es igual que flex-direction: row-reverse. Mientras que en el primero se ajusta el último elemento al borde derecho, en el segundo, se cambia el orden completamente, lo que significa que el primer elemento del código aparece en el borde derecho.