Dado que flexbox es un módulo completo y no una sola propiedad, implica un montón de cosas, incluyendo todo su conjunto de propiedades. Algunas de ellas están destinadas a ser establecidas en el contenedor (elemento padre, conocido como "contenedor flex") mientras que las otras están destinadas a ser establecidas en los hijos (llamados "elementos flex"). Si la maquetación "normal" se basa en las direcciones de flujo en bloque y en línea, la maquetación flexible se basa en las "direcciones de flujo flexibles". Consulte esta figura de la especificación, en la que se explica la idea principal de la maquetación flexible.
¿Qué es Flexbox?
Los elementos se colocarán siguiendo el eje principal (desde el inicio principal hasta el final principal) o el eje transversal (desde el inicio transversal hasta el final transversal). eje principal - El eje principal de un contenedor flexible es el eje principal a lo largo del cual se colocan los elementos flexibles. Cuidado, no es necesariamente horizontal; depende de la propiedad flex-dirección (ver más abajo). main-start | main-end - Los elementos flex se colocan dentro del contenedor empezando por main-start y yendo hasta main-end. main size - La anchura o la altura de un elemento flex, 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 "anchura" o "altura", según la dimensión principal. eje transversal - El eje perpendicular al eje principal se llama eje transversal.
Su dirección depende de la dirección del eje principal. inicio cruzado | final cruzado - Las líneas flexibles se llenan de elementos y se colocan en el contenedor empezando por el lado de inicio cruzado del contenedor flexible y yendo hacia el lado de final cruzado. tamaño cruzado - La anchura o la altura de un elemento flexible, cualquiera que sea la dimensión cruzada, es el tamaño cruzado del elemento. La propiedad de tamaño transversal es la que se encuentra en la dimensión transversal de 'anchura' o 'altura'.