Blog 1.0

Aprende Flexbox CSS en 5 Minutos

enero 21, 2018

Una rapida introcucción al popular modulo en CSS

En este post vamos a aprender lo básico del modulo CSS Flexbox, que se ha convertido en una de los más populares en los últimos años.

Vamos a usar una barra de navegación (<nav/>) como ejemplo, ya que es muy tipico el uso de este modulo en este tipo de elementos. Solo veremos las propiedades más usadas para este modulo y dejaremos para posteriores posts las que no son tan criticas.

Comencemos!

Nuestro primer diseño Flexbox

Los dos principales componentes de un diseño Flexbox son el contenedor y sus items.

<nav class="contenedor">
  <div>Juan</div>
  <div>Paco</div>
  <div>Luis</div>
</nav>

Antes de convertir esto a un diseño Flexbox, los elementos </div> se acomodan uno encima de otro, como en esta imagen:

Primer Ejemplo

añadí un poco de estilos básicos pero nada que ver con el ejemplo.

Para convertilo a diseño Flexbox solo hace falta añadir lo siguiente al estilo del contenedor:

.contenedor {
    display: flex;
}

Esto acomodara de manera automatica los items en el eje horizontal del contenedor.

Segundo Ejemplo

Si quieres ver el codigo funcionando puedes checarlo aquí.

Justificar el contenido y Alinear los items

Justify-content y align-items son dos propiedades CSS que nos ayudan a distribuir los items en el contenedor. Estos controlan como los items son posicionados en el eje vertical y horizontal.

En este blog post solo veremos la propiedad justify-content ya que es más usada que align-items.

Vamos a centrar todos los items en el eje horizontal usando justify-content:

.contenedor {
    display: flex;
    justify-content: center;
}

Tercer Ejemplo

O lo podemos cambiar a space-between, el cual añadirá espacio entre los elementos, como aquí:

.contenedor {
    display: flex;
    justify-content: space-between;
}

Cuarto Ejemplo

Aquí los valores que puedes usar para justify-content:

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

Te recomiendo que que juegues con ellos un poco y veas como se comportan los items dentro de contenedor con cada propiedad, para entenderlo mejor.

Controlar un solo elemento

También podemos controlar un solo item. digamos por ejemplo que queremos los primeros dos items al lado izquierdo, pero mover a luis al lado derecho.

Para hacerlo usaremos la vieja confiable de poner margin en auto.

.luis {
    margin-left: auto;
}

Quinto Ejemplo

Si quisiéramos que ambos paco y luis se movieran a la derecha, simplemente añadimos margin-left a paco.

.paco {
    margin-left: auto;
}

De esta manera paco se moverá a la derecha tanto como le sea posible y a su vez empujara a luis con el:

Sexto Ejemplo

La propiedad flex

Hasta ahora, solo hemos movido los items con el ancho fijo, pero que tal si queremos que estos sean responsivos? Para conseguirlo tenemos otra propiedad llamada flex que es mucho más sencilla que usar porcentajes.

Simplemente añadimos la propiedad flex con valor 1 en todos los items.

.contenedor > div {
    flex: 1;
}

Septimo Ejemplo

Como puedes ver esto estira todos los items hasta llenar el contenedor.

En muchos casos es probable que queramos que solo uno de los items llene el espacio extra dejado por los demas elementos, en este ejemplo lo haremos con paco:

.paco {
    flex: 1;
}

Octavo Ejemplo

Antes de terminar me gustaría mencionar que flex es la abreviación de tres propiedades css: flex-grow, flex-shrink y flex-basis. Aunque aprender estas tomaría más de 5 minutos, por lo tanto esta fuera del alcance de este tutorial.

Espero te haya gustado y sido de utilidad espera más de estos mini tutoriales pronto.

Blog original en Ingles


Marco Medina

Escrito por Marco Medina que vive y trabaja en San Jose, CA.
Haciendo cosas para PayPal. Contacto: Twitter LinkedIn