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!
Comentarios