01. Introducción a CSS Flex

La tecnología CSS Flexbox es un sistema de elementos flexibles que nace de la idea de olvidar estos mecanismos y acostumbrarnos a una mecánica más potente, limpia y personalizable, en la que los elementos HTML se adaptan y colocan automáticamente, lo que permite personalizar los diseños con más facilidad. Está especialmente diseñado para crear, mediante CSS, estructuras de una sóla dimensión.

Conceptos

Para empezar a utilizar flexbox lo primero que debemos hacer es conocer algunos de los elementos básicos de este nuevo esquema, que son los siguientes.

• Contenedor: es el elemento padre, que posee en su interior cada uno de los items flexibles, por defecto el eje principal del contenedor flexbox es en horizontal (en fila / row)
  • Eje  principal: los contenedores flexbox tienen una orientación principal específica, que por defecto es en fila.
  • Eje secundario: disponen de una orientación secundaria, perpendicular a la principal.
• Item: es cada uno de los hijos que tendrá el contenedor en su interior.

Ejm

    <div class="container">
      <!-- Flex container -->
      <div class="item item-1">1</div>
      <!-- Flex items -->
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
    </div>

Para activar el modo flexbox, hemos utilizado sobre el elemento contenedor la propiedad display, y especificamos el valor flex o inline-flex (dependiendo de como queramos que se comporte el contenedor).

Por defecto, observaremos que los elementos se disponen todos sobre una misma línea. Esto ocurre porque estamos utilizando el modo flexbox y estaremos trabajando con ítems flexibles básicos, garantizando que no se desbordarán ni mostrarán los problemas que, por ejemplo, tienen los porcentajes sobre elementos que no utilizan flexbox.