Breve nota: Se parte de mi newsletter semanal. Va a estar enfocado compartir recursos increíbles sobre desarrollo frontend (Artículos, Videos, Noticias, etc.).

Flexbox es un nuevo módulo de diseño en CSS3 para mejorar la forma en que hacemos Responsive Design, evitando así el uso de float (No uses float para hacer responsive design). Gracias a FlexBox facilitamos la forma en que posicionamos elementos, es más simple y usamos menos código.

Para empezar a trabajar con FlexBox primero tienes que entender la estructura, FlexBox está constituido por un padre (Contenedor - Flex) y sus hijos (Elemento - Flex).

FlexBox Structure

  • Contenedor - Flex: Es el elemento "padre" que contiene nuestros elementos "hijos", para definirlo se usa "flex" o "inline-flex" en la propiedad display.

  • Elemento - Flex: Estos son los elementos "hijos" que tendrán un comportamiento automático dependiendo lo que defina el elemento "padre".

  • Ejes: Cada diseño "FlexBox" está compuesto por dos ejes.

Eje principal: Es el eje que define la posición horizontal de los
elementos - Flex

Eje secundario: Es el eje que define la posición vertical de los elementos - Flex.

  • Direcciones: Las partes de inicio principal / fin principal e inicio secundario / fin secundario del Contenedor - Flex definen el origen y final del flujo de elementos - Flex.

  • Dimensiones: Esto equivale a la anchura (tamaño principal) y la altura (tamaño secundario) del elemento - Flex que dependen de eje principal y eje secundario.

Si no entendiste nada de lo que leíste, tranquilo no pasa nada, más adelante vienen los ejemplos.

Actualmente Flexbox es compatible con todos los navegadores.

Definiendo FlexBox

Para empezar a usar FlexBox solo tenemos que definir flex en la propiedad display del elemento padre:

<section class="padre">
</section>
.padre{
	display: flex;
}

Nota: Esto es lo único que necesitamos para configurar el contenedor principal y automáticamente todos sus hijos se convertirán en elementos flex.

Propiedades del contenedor - flex (Padre)

El contenedor - flex (Padre) tiene una serie de propiedades interesantes con las cuales podemos ir empezando a trabajar.

flex-direction

Valor por defecto: row

Esta propiedad define las direcciones del eje principal, es decir, hacia donde se moverán los Elementos - Flex, tanto horizontalmente como verticalmente.

Horizontalmente:

.padre {
  flex-direction: row;
}

Los elementos - flex se apilan en una fila de izquierda a derecha.

flex-direction

.padre {
  flex-direction: row-reverse;
}

Los elementos - flex se apilan en una fila de derecha a izquierda.

flex-direction

Verticalmente:

.padre {
  flex-direction: column;
}

Los elementos - flex se apilan en una columna de arriba abajo.

flex-direction

.padre {
  flex-direction: column-reverse;
}

Los elementos - flex se apilan en una columna de abajo arriba.

flex-direction

flex-wrap

Valor por defecto: nowrap

Al manejar Flexbox el concepto inicial es fijar los elementos - flex en una sola línea, pero con la propiedad flex-wrap controlamos si el contenedor flex mueve sus elementos - flex en líneas individuales o múltiples, es una de las cosas más asombrosas de FlexBox, ya que con una simple línea de código nos ahorramos muchos problemas.

.padre {
  flex-wrap: nowrap;
}

Los elementos - flex se muestran en una fila y se pueden encoger dependiendo de su contenedor - flex.

flex-wrap

.padre {
  flex-wrap: wrap;
}

Los elementos - flex se muestran en varias filas (si es necesario), de izquierda a derecha y de arriba abajo.

flex-wrap

.padre {
  flex-wrap: wrap-reverse;
}

Los elementos - flex se muestran en varias filas (si es necesario), de izquierda a derecha y de abajo arriba.

flex-wrap

flex-flow

Valor por defecto: row nowrap

Esta propiedad es una forma rápida para establecer las propiedades flex-direction y flex-wrap.

.padre {
  flex-flow: <flex-direction> || <flex-wrap>;
}

Ejemplo:

.padre {
  flex-flow: column-reverse wrap;
}

justify-content

Valor por defecto: flex-start

La propiedad justify-content alinea los elementos - flex a lo largo del eje principal de la línea actual (contenedor - flex).

.padre {
  justify-content: flex-start;
}

Los elementos - flex están alineados con el lado izquierdo del contenedor - flex.

justify-content

.padre {
  justify-content: flex-end;
}

Los elementos - flex están alineados con el lado derecho del contenedor - flex.

justify-content

.padre {
  justify-content: center;
}

Los elementos - flex están alineados al centro del contenedor - flex.

justify-content

.padre {
  justify-content: space-between;
}

Los elementos - flex tienen la misma distancia entre ellos, pero el primero y el último elemento - flex están alineados con los bordes del contenedor - flex.

justify-content

.padre {
  justify-content: space-around;
}

Los elementos - flex tienen la misma distancia entre ellos, incluso el primero y el último elemento - flex.

justify-content

align-items

Valor por defecto: stretch

La propiedad align-items es muy similar a la propiedad justify-content, pero este es en la dirección del eje secundario.

.padre {
  align-items: stretch;
}

Los elementos - flex ocupan toda la altura (o anchura) de inicio secundario a fin secundario.

align-items

.padre {
  align-items: flex-start;
}

Los elementos - flex se apilan al inicio secundario del contenido - flex.

align-items

.padre {
  align-items: flex-end;
}

Los elementos - flex se apilan al fin secundario del contenido - flex.

align-items

.padre {
  align-items: center;
}

Los elementos - flex se apilan al centro del eje secundario.

align-items

.padre {
  align-items: baseline;
}

Los elementos - flex se alinean de manera que sus líneas base quedan iguales.

align-items

align-content

Valor por defecto: stretch

La propiedad align-content alinea las líneas de un contenedor - flex cuando los elementos no utilizan todo el espacio disponible en el eje secundario.

.padre {
  align-content: stretch;
}

Los elementos - flex se muestran con espacio distribuido después de cada fila de elementos - flex.

align-content

.padre {
  align-content: flex-start;
}

Los elementos - flex se apilan hacia el inicio secundario del contenedor - flex.

align-content

.padre {
  align-content: flex-end;
}

Los elementos - flex se apilan hacia el fin secundario del contenedor - flex.

align-content

.padre {
  align-content: center;
}

Las filas se apilan en el centro del eje secundario.

align-content

.padre {
  align-content: space-between;
}

Las filas de los elementos - flex tienen la misma separación entre ellos, pero la primera y última fila están alineadas con los bordes del contenedor - flex.

align-content

.padre {
  align-content: space-around;
}

Los elementos - flex tienen la misma separación en cada fila de elementos - flex.

align-content

Nota: Esta propiedad solo funciona cuando el contenedor - flex tiene varias líneas de elementos - flex. Si solo existe una sola línea esta propiedad no tiene efecto.

Gracias a estas propiedades ya podemos crear cosas increíbles y fantásticas, ¡pero Hey!, eso no es todo, aún faltan más propiedades, solo que estas no son para el contenedor (Padre), si no, que estas aplican para los elementos (hijos).

Propiedades de los elementos - flex (Hijos)

Al igual que el contenedor - flex, los elementos - flex tienen propiedades interesantes, con las cuales podremos hacer cosas aun más increíbles.

order

Valor por defecto: 0

Con esta propiedad controlamos el orden de los elementos - flex que están dentro del contenedor - flex.

.hijo {
  order: <integer>;
}

Los elementos - flex pueden ser reordenados con esta simple propiedad sin la necesidad de reestructurar el código HTML.

order

flex-grow

Valor por defecto: 0

Esta propiedad especifica el factor que determina hasta que punto un elemento - flex crecerá en relación con el resto de los elementos - flex.

.hijo {
  flex-grow: <number>;
}

Si los elementos - flex tienen el mismo valor para flex-grow, todos van a tener el mismo tamaño, según el contenedor - flex.

flex-grow

Al definir que en el segundo elemento - flex la propiedad flex-grow va a tener un valor de dos, este va a tomar un ancho que equivale a la suma de dos elementos.

flex-grow

Nota: Los números negativos igual aplican para esta propiedad.

flex-shrink

Valor por defecto: 1

Esta propiedad especifica cómo el elemento - flex se reducirá con respecto al resto de los elementos flexibles dentro del mismo contenedor.

.hijo{
  flex-shrink: <number>;
}

Por defecto, todos lo elementos - flex se pueden reducir, pero si le ponemos el valor de 0 no se van a encoger, si no, que van a mantener el tamaño original.

flex-shrink

Nota: Los números negativos igual aplican para esta propiedad.

flex-basis

Valor por defecto: auto

Esta propiedad tiene los mismos valores que las propiedades width y height y especifica el tamaño principal del elemento - flex, distribuyéndose de acuerdo con los factores flex.

.hijo {
  flex-basis: auto | <width>;
}

Aquí especificamos que el quinto elemento - flex dicta el tamaño inicial del elemento.

flex-basis

flex

Valor por defecto: 0 1 auto

Con esta propiedad solo es la abreviatura de flex-grow, flex-shrink y flex-basis. Entre otros valores que también se pueden configurar para auto ( 1 1 auto ) y none ( 0 0 auto ).

.hijo {
	flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

align-self

Valor por defecto: auto

Esta propiedad permite la alineación por defecto (o la especifica por align-items) para ser anulados por elementos - flex individuales.

.hijo {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

El tercer y quinto elemento - flex han anulado la alineación a través de la propiedad align-self.

align-self

Nota: float, clear y vertical-align no tienen efecto en un elemento - flex.

¡Ahora a crear cosas increíbles!

Gracias a el conjunto de todas estas propiedades que acabas de aprender, puedes crear sitios responsivos de manera muy fácil y sin tener que darte golpes en la cabeza, el único límite es tu imaginación.

Te invito a que abras tu editor de texto y te pongas a probar el código, no importa si no te sale a la primera o si cometes errores, solo no dejes de intentarlo.

Fuentes: scotch y css-ticks.