Flexbox | Posicionar flex items a la derecha/izquierda

Esta es probablemente una de las situaciones con las que más me  he topado a la hora de armar layouts y gracias a flexbox implementarlo es bastante sencillo.

El secreto está en los márgenes automáticos:

Cada que aplicamos un auto margen a un flex item, su margen ocupa todo el espacio disponible (extra) del contenedor flex, dependiendo de la dirección donde apliquemos dicho margen.

Veámoslo en acción:

<div class="flex">
  <div class="child">
   Item 1
  </div>
</div>

.flex {
  display: flex;
  height: 300px;
}

.child {
  margin-left: auto;
  height: 25px;
  border: 1px solid #ccc;
  padding: 5px;
}

Como podemos observar el flex item se posicionó a la derecha, ya que su margen izquierdo se extendió para ocupar todo el espacio disponible dentro del contenedor flex.

Si quisiéramos hacer lo contrario, es decir posicionar el flex item a la izquierda lo haríamos de la siguiente manera:

.child {
  margin-right: auto;
  height: 25px;
  border: 1px solid #ccc;
  padding: 5px;
}

Este ejemplo no es tan claro ya que solo tenemos 1 flex item pero las cosas se ponen interesantes conforme agregamos mas flex items o la aplicamos a otros márgenes como el margin-top o incluso a todos (margin: auto).

Puedes jugar un poco y ver los resultados:

Espero que les haya sido útil,  See you space cowboy!

También si les interesa pueden hecharle un ojo a la serie sobre flexbox layouts