Guía MiniCode de Flexbox

Hola 👋 MiniCoders, hoy estamos aquí para hablar de Flexbox. Este es el denominado modelo de cajas flexible, lleva años arraigado en la comunidad de desarrollo y hoy en día se usa en muchos proyectos que podéis ver en producción. Es uno de los métodos más utilizados para distribuir elementos y nos da unas herramientas que alcanzan mayor precisión.

Particularidad de Flexbox

A diferencia de otros métodos, Flexbox nos permite trabajar controlando a la vez columnas y filas, esto sucede gracias a la distribución de elementos en dos ejes. Podemos convertir en flexible cualquier elemento aplicándole la propiedad display: flex .

<div>
  <p>Alberto</p>
  <p>Antonio</p>
  <p>Cristian</p>
  <p>Álvaro</p>
</div>

div {
  display: flex;
}

p {
  color: #00b779;
  padding: 5px;
  border: 1px solid #00b779;
  background-color: #7f5af0;
}

De tal modo nuestros elementos se verían distribuidos dentro del eje x ocupando el espacio dado a los elementos.

Los navegadores actuales ya nos permiten interactuar con las propiedades de flex. Cuando estamos aprendiendo nos puede ayudar como punto de partida para jugar con toda su versatilidad.

Eje central - Main Axis

El eje central es el que podemos controlar mediante la propiedad flex-direction. En este eje se distribuye nuestro contenido en fila o en columna, pudiendo invertir el sentido de ellas.

Para trabajar con filas o rows, tenemos que indicar flex-direction: row | display: flex .

<div class="main-axis-container">
  <div class="item-main-axis"></div>
  <div class="item-main-axis"></div>
  <div class="item-main-axis"></div>
  <div class="item-main-axis"></div>
</div>

display: flex;
  flex-direction: row;
  background-color: #00b779;
}

.item-main-axis {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #7f5af0;
  border: 3px solid black;
}

Ahora en nuestro navegador nuestros bloques se representan en fila dentro del eje principal.

Si queremos que nuestros elementos sean columnas tan solo tenemos que cambiar la dirección flex-direction: column .

.main-axis-container {
  display: flex;
  flex-direction: column;
  background-color: #00b779;
}

.item-main-axis {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #7f5af0;
  border: 3px solid black;
}

Los valores que podemos aplicarle a flex-direction son: row, row-reverse, column y column-reverse. Por lo tanto, y tal como hemos dicho, en este eje controlaremos la distribución en fila o en columna. Por defecto, si no indicamos lo contrario, nuestro flex-direction tendrá el valor row.

Eje cruzado - Cross Axis

El Cross Axis es el interno a nuestro eje principal, por lo tanto se ajustará al ancho y largo de nuestra fila o columna definida por flex-direction. Es decir, podremos controlar la alineación y justificación del contenido que tenemos dentro de estas filas y columnas. Estos parámetros se pueden controlar con las herramientas align-items, align-content y justify-content.

Como podéis ver en el ejemplo, hemos alineado el contenido de nuestra fila al centro y repartido los elementos “a lo largo” del contenedor gracias a align-items: center y justify-content: space-around.

.main-axis-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

justify-content: Start y End

Además de la posición debemos de tener en cuenta la horizontalidad de nuestro contenido, es decir, saber dónde empieza y dónde acaba nuestro elemento en el documento.

.main-axis-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.item-main-axis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: #7f5af0;
  border: 3px solid black;
}

.main-axis-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.item-main-axis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: #7f5af0;
  border: 3px solid black;
}

A la hora de internacionalizar una aplicación tendremos que tener en cuenta de que no todo es de izquierda a derecha, por lo que podremos justificar teniendo en cuenta el start o el end gracias a justify-content. Por ejemplo, un texto en árabe estaría justificado a la derecha de nuestra “fila” con un justify-content: flex-end.

Propiedades del contenedor

Tal y como hemos visto al inicio del artículo, la propiedad display nos permite convertir mediante el atributo flex un contenedor en flexible, en este caso el contenedor sería la zona verde de la imagen, mientras que los elementos del mismo serían los cuadrados morados.

display: flex

.box {
  display: flex;
}

Propiedades del contenedor [elemento padre] -flex-direction

Esta propiedad establece el eje central y la dirección de los elementos dentro de un contenedor, por lo que podemos especificar si queremos distribuirlos en fila o en columna definiendo una dirección específica.

flex-direction: row

.container {
  display: flex;
  flex-direction: row;
}

flex-direction: row

.container {
  display: flex;
  flex-direction: row-reverse;
}

flex-direction: column

.container {
  display: flex;
  flex-direction: column;
}

flex-direction: column-reverse

.container {
  display: flex;
  flex-direction: column-reverse;
}

Propiedades del contenedor [elemento padre] -flex-wrap

Gracias a esta propiedad, los items que no quepan en el ancho de una línea (que es el comportamiento por defecto de las flexbox) lo harán en la siguiente.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Propiedades del contenedor [elemento padre] -flex-flow

Esto es un atajo de las dos propiedades anteriores, con la cual podemos definir tanto la dirección (row o column) y si necesitamos wrap en nuestro contenedor.

.container {
  flex-flow: row wrap;
}

Propiedades del contenedor [elemento padre] -justify-content

Esta propiedad conforma la alineación de los items a lo largo del eje principal e indica como se tienen que distribuir los elementos a lo largo del espacio de dicho eje.

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

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

.container {
  justify-content: center;
}

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

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

.container {
  justify-content: space-evenly;
}

Propiedades del contenedor [elemento padre] -align-items

Esto define el alineamiento de los items a lo largo del eje cruzado, es decir, la manera en la que se distribuyen los items a lo largo y ancho del eje interno de nuestro eje principal.

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

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

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

.container {
  align-items: baseline;
}

Propiedades del contenedor [elemento padre] -align-content

Es el equivalente a align-items pero con multi-lineas, es decir, align-items distribuye los items a través del eje cruzado y align-content los distribuye de igual manera en líneas diferentes generadas, por ejemplo, por un flex-wrap.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
    stretch | start | end | baseline;
}

Propiedades del item [elemento hijo] -order

Esta propiedad controla el orden en el que aparecen los items a través del contenedor, por defecto es 0.

<div class="box">
  <div class="box-item">
    <a href="#">1</a>
  </div>
  <div class="box-item">
    <a href="#">2</a>
  </div>
  <div class="box-item">
    <a href="#">3</a>
  </div>
  <div class="box-item">
    <a href="#">4</a>
  </div>
  <div class="box-item">
    <a href="#">5</a>
  </div>
</div>

.box {
  display: flex;
  flex-direction: row;
}

.box-item {
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: #7f5af0;
  border: 3px solid black;
  align-items: center;
  justify-content: center;
}
.box :nth-child(1) {
  order: 2;
}
.box :nth-child(2) {
  order: 3;
}
.box :nth-child(3) {
  order: 1;
}
.box :nth-child(4) {
  order: 3;
}
.box :nth-child(5) {
  order: 1;
}

Propiedades del item [elemento hijo] -flex-grow

Esta propiedad permite al item “crecer” o estirarse lo indicado hasta ocupar su parte proporcional en el contenedor. Es decir, si le indicamos a un item que su flex-grow sea 2 ocupará el doble que su espacio normal a lo largo del contenedor.

<div class="grow-container">
  <div class="box box-grow">1</div>
  <div class="box box-grow-doble">2</div>
  <div class="box box-grow">1</div>
  <div class="box box-grow-doble">2</div>
  <div class="box box-grow">1</div>
</div>

.grow-container {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.box {
  height: 50px;
  margin: 10px;
  border: 3px solid black;
  align-items: center;
  justify-content: center;
}

.box-grow {
  flex-grow: 1;
  background-color: #7f5af0;
}

.box-grow-doble {
  flex-grow: 2;
}

Propiedades del item [elemento hijo] -flex-shrink

Define la capacidad de un item de encogerse si fuera necesario. El valor por defecto es 1, es decir, el comportamiento normal de un elemento.

<div class="shrink-container">
  <div class="box ">1</div>
  <div class="box box-shrink">2</div>
  <div class="box ">1</div>
  <div class="box box-shrink">2</div>
  <div class="box ">1</div>
</div>

.shrink-container {
  display: flex;
  width: 350px;
  height: 100px;
}

.box {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
  border: 3px solid black;
}

.box-shrink {
  flex-shrink: 3;
  background-color: #7f5af0;
}

Propiedades del item [elemento hijo] -align-self

Esta propiedad permite que los elementos individuales sobre-escriban el align-items por defecto que tienen los contenedores. Dicho de otra manera, esta propiedad individual tiene más importancia que la definida por el contenedor.

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

Esperamos que os haya servido y hayáis aprendido muchísimo, nos vemos pronto 🔜 !