FlexBox Conceptos

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías. FlexBox

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS , el cual controla columnas y filas a la vez.

Elemetos basicos de FlexBox

Contenedor:Es el elemento padre que tendrá en su interior cada uno de los ítems flexibles. Observa que al contrario que muchas otras estructuras CSS, por norma general, en Flex establecemos las propiedades al elemento padre.
Eje principal: Los contenedores flexibles tendrán una orientación principal específica. Por defecto, el eje principal del contenedor flex es en horizontal (en fila).
Eje secundario:De la misma forma, los contenedores flexibles tendrán una orientación secundaria, perpendicular a la principal. Si la principal es en horizontal, la secundaria será en vertical (y viceversa).
Ítem:Cada uno de los hijos que tendrá el contenedor en su interior.

Modalidades de FlexBox

Una vez tenemos claro esto, imaginemos el siguiente escenario:


                <div class="container">
 
                    <div> class="item item-1">1  </div>

                    <div> class="item item-2">2 </div>

                    <div> class="item item-3">3  </div>

                </div>