-- Qué es CSS FlexBox
CSS FlexBox no es una simple propiedad CSS3, es un modelo de diseño. Tiene como objetivo proporcionar una forma más eficiente de distribuir el espacio entre los elementos de un contenedor.
Flexbox intenta cambiar la forma de diseñar y generar contenidos totalmente adaptables a cualquier dispositivo. Flexbox es probablemente uno de los más completos y eficaces módulos de maquetación. Todo lo que era complicado en versiones anteriores de CSS (como centrar verticalmente o diseñar estructuras que se redimensionen con elegancia) con flexbox ( CSS3 ) es ya una tarea muy fácil (aunque la curva de aprendizaje de todas sus propiedades y comportamientos es algo mayor).
El módulo Flexbox, como he indicado, es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Es, por tanto, muy conveniente conocer el manejo de las media queries y como se implementan en un archivo CSS.
La idea principal detrás del diseño de flex es dar al contenedor la capacidad de alterar el ancho / altura (y orden) de sus elementos hijos para llenar mejor el espacio disponible. Un contenedor flexible expande los elementos para llenar el espacio libre disponible o los encoge para evitar el desbordamiento.
El diseño con Flexbox es el más apropiado para los componentes de una aplicación y para los diseños a pequeña escala, mientras que el diseño con Grid Layout está pensado para diseños a mayor escala.
Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos. Además no es necesario utilizar "limpiar-float" (clear: both) para que el comportamiento sea el esperado.
Conceptos básicos que se usan con Flexbox
main axis: Es el eje principal de un contenedor Flex, es el eje primario a lo largo del cual se disponen los elementos hijos (flex-items) del contenedor Flex. Puede parecer que es siempre el eje horizontal, esto es porque, por defecto, la propiedad flex-direction es row, si la cambiamos a column entonces el eje principal es el vertical.
main-start | main-end: Los elementos flexibles hijos se colocan dentro del contenedor flex padre a partir de main-start y van hasta el main-end. Este comportamiento también se puede cambiar e ir al revés.
main size: Es el ancho o el alto de los elementos hijos. Estos tamaños son siempre relativos a los ejes, por lo que main size podría ser width o height según la dirección del main axis.
cross axis: Es el eje perpendicular al eje principal y se denomina eje secundario o transversal. Su dirección depende de la dirección del eje principal. Aunque por defecto es el eje vertical si el eje principal se cambia a vertical entonces el eje secundario es horizontal.
cross-start | cross-end: Los elementos flexibles hijos se colocan en el contenedor flex padre y van desde cross-start y hasta cross-end. Hay que tener cuidado porque, como he dicho, si cambiamos la dirección del eje principal, también cambia el secundario y, por tanto, el comienzo y el final de éste.
cross size: Es el ancho o el alto de los elementos hijos. Estos tamaños son siempre relativos a los ejes, por lo que cross size podría ser width o height según la dirección del cross axis.
Espacio disponible y espacio ocupado
El espacio ocupado es la suma de los main-size de todos los elementos hijos de la misma línea (más los márgenes, si tiene).
El espacio disponible es la diferencia entre el tamaño del contenedor Flex y el espacio ocupado, pudiendo ser positivo o negativo. Si el espacio disponible es negativo (es decir, si la suma de los tamaños de los items es mayor que el tamaños del contenedor) el comportamiento predeterminado es que los flex-items se encojan para caber en una sola línea, sin que se colapsen los márgenes.
