Fácil Tutorial CSS Flexbox para aprender desde cero

Con este tutorial de CSS Flexbox (Diseño de Caja Flexibles) aprenderás fácilmente a crear páginas web responsivas y adaptables mediante el uso de CSS. 

No requiere de mucho esfuerzo, únicamente sigue los pasos que te iré indicando y aprenderás rápidamente a diseñar sitios web modernos.

Introducción al Tutorial de CSS Flexbox

Si ya tienes conocimientos de HTML y CSS3 habrás oído y usado la propiedad float para desplazar contenedores. Pues bien con Flexbox podrás prescindir de usar float para posicionar tus elementos a izquierda o derecha, ya que, con Flexbox podremos posicionar y distribuir los elementos a nuestro antojo.

El modelo Flexbox tiene un contenedor padre (Flex-container) que contiene los elementos flexibles. Y un contenedor hijo (Flex-Items) que son los elementos que se encuentran dentro del contenedor padre.

Empezando con CSS Flexbox

Para iniciar nuestro modelo utilizaremos la propiedad  display con valor flex, que establece un contenedor de ítems flexible en bloque, similar a block de CSS o inline-flex que es similar o equivalente al inline-block de CSS .

Para que podáis entenderlo mejor, os voy a mostrar un ejemplo, en el que crearemos  un div padre cuya clase es contenedor y varios hijos cuyas clases son elemento:

<div class="contenedor">
    <div class="elemento">1</div>
    <div class="elemento">2</div>
    <div class="elemento">3</div>
    <div class="elemento">4</div>
</div>

Además, crearemos nuestra hoja de estilos CSS con las siguientes propiedades para iniciar nuestro modelo Flexbox y añadirles un estilo básico:

.contenedor {
    display: flex;
    width: 600px;
    background-color: #DDF58C;
}

.elemento {
    background-color: #67C3E6;
    width: 100px;
    height: 100px;
    margin: 10px;
}

Propiedades para el Contenedor Padre (Flex-Container)

Los Flex-Container o contenedores Padre tienen las siguientes propiedades:

• Flex-direction
• Flex-Wrap
• Flex-flow
• justify-content
• align-items
• align-content

Flex-direction

Esta propiedad nos permite establecer la dirección en la que se acomodaran nuestros elemento, es decir, modificamos la dirección del eje principal del contenedor para que se oriente en horizontal, por defecto, o en vertical.

flex-direction: row | column | row-reverse | column-reverse ;

Row: Es el valor por defecto. Alinea los elementos en fila a lo largo del eje principal en horizontal.

Column: Establece la dirección del eje principal en vertical, es decir, de arriba a abajo.

Row-reverse: Igual que ROW, pero en sentido inverso, es decir, de derecha a izquierda.

Column-reverse: Alinea en columna de arriba a abajo, pero en orden inverso a column.

#contenedor {
  background: #CCC;
  display: flex;
  flex-direction: column;
}

.elemento{
  background: #555;
}

Flex-Wrap

Evita o permite el desbordamiento (multilínea). Gracias a esta propiedad podremos indicar si todos los elementos estarán en línea con su máximo ancho posible o establecido o si queremos que respete el ancho y los elementos se posicionen en varias lineas de elementos.

flex-wrap: no-wrap | wrap | wrap-reverse;

#contenedor {
  background: #CCC;
  display: flex;
  width: 200px;
  flex-wrap: wrap;  /* Comportamiento por defecto: nowrap */
}

.elemento {
  background: #777;
  width: 50%;
}

Flex Flow

Es un atajo entre flex-direction y flex-wrap.

/* Primer valor es el valor que le daríamos a flex-direction */
/* Segundo valor es el valor que le daríamos a flex-wrap */

flex-flow:row wrap;

Justify Content

Nos permite colocar los elementos de un contenedor mediante una disposición concreta a lo largo del eje principal:

justify-content: flex-end | flex-start | center | space-around | space-between ;

Aquí os dejo un esquema para que podáis entenderlo gráficamente:

Align Items (Elementos)

Se encarga de alinear los ítems en el eje secundario del contenedor, pero no debemos de confundirlo con align-content, ya que align-items actua sobre la línea actual, y no sobre cada una de las líneas de un contenedor multilínea.

align-items: flex-start | flex-end | center | stretch | baseline;

Esquema gráfico para entender el funcionamiento de align-items

• Flex-start: Posiciona los elementos desde el inicio del contenedor, es decir, a lo largo del eje transversal.
• Flex-end: Los posiciona al final del contenedor, a lo largo del eje transversal.
• Stretch: Valor por defecto. Extiende los elementos desde el principio hasta el final a lo largo del eje transversal.
• Center: Centra los elementos a lo largo del eje.
• Baseline: Aparentemente, la baseline se parece a flex-start, pero con la diferencia de que la línea que posiciona los elementos es la primera línea de texto del primer elemento. Para que se note la diferencia, hemos aumentado el tamaño de la fuente del primer elemento.

Align Content

Nos permite posicionar o distribuir elementos verticalmente, igual que align-items, solo que align-content solo funciona para lineas de elementos, por ejemplo cuando tenemos establecido un flex-wrap:wrap; y los elementos se posicionan en varias lineas.

align-content: flex-start | flex-end | center | stretch | space-between | space-around ;

• Flex-start: Aliena los elementos a lo largo del inicio del eje transversal.
• Flex-end: Alinea los elementos a lo largo del extremo del eje transversal.
• Center: Los alinea en el centro del eje.
• Stretch: Valor por defecto. Estira los elementos a lo largo del eje transversal de principio a fin.

Esquema del funcionamiento de align-content

Propiedades para los elementos hijos (Flex-Items)

Ahora nos referimos a los Flex-items, que son los que se encuentran dentro del contenedor. En primer lugar, las propiedades de estos elementos son: Order || Flex-grow || Flex-shrink || Flex-basis.

Cómo crear un efecto LightBox solo con CSS3

Order

Establecemos el orden que tendrá un elemento a comparación con otros elementos.

.flex-item:nth-child(1){
    order:1;
   }
.flex-item:nth-child(2){
    order:2;
   }

Flex Grow

Establecemos la proporción de crecimiento que tendrá un elemento a comparacion con los demás.

.flex-item {
    flex-grow: 0;
 }

Flex Shrink

Número que indica el decrecimiento del ítem respecto al resto.

.flex-item {
    flex-shrink:0;
}

Flex Basis

Establecemos el tamaño que tendrá un elemento.

.flex-item {
    flex-basis : auto;
}

Bonus

Ahora que ya has finalizado y realizado todas las prácticas de este tutorial CSS Flexbox te recomiendo que trates de realizar por ti mismo diferentes ejemplos.

Si ves que no puedes, vuelve al tutorial y repite los pasos una y otra vez hasta dominar las diferentes técnicas.

Para finalizar, os recomiendo que visitéis la web Flexbox Froggy que os permitirá poner en práctica todo lo aprendido.

Déjame tus comentarios y estrellas para seguir creciendo. ¡Gracias!

Contenido Relacionado