Flexbox y el diseño responsive unidireccional

flexbox
flexbox

Si eres de esos que todavía sufren con la propiedad float o desperdician una tarde entera intentando alinear elementos verticalmente, tengo la solución para ti.

La propiedad Flexbox no es nueva, el concepto de Flexbox tiene más de una década y se ha ido mejorando con el paso de los años. Ahora, es una de las propiedades más usadas y útiles junto a CSS Grid, que nos permiten crear diseños responsive con una sintaxis muy sencilla.

La propiedad Flexible Box, o Flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos.

MDN Web Docs

1. Primeros pasos con Flexbox

Lo primero de todo, para definir un bloque flexbox y habilitar flex a todos sus hijos, necesitamos el siguiente fragmento de código.

.container {
  display: flex;
}

A partir de ahora, ya podemos aplicar el resto de propiedades que definen la dirección, orden y espaciado del resto de elementos. Por ejemplo, un truco muy útil para centrar vertical y horizontalmente haríamos lo siguiente.

<div class="flexbox center">
  <div class="item">Sección centrada</div>
</div>
.center {
  display: flex; /* Por defecto alinea horizontalmente 'row' */
  justify-content: center; /* Distribuye el espacio del contenido en el eje principal */
  align-items: center; /* Ajusta los elementos de un contenedor cuando hay espacio extra en el eje transversal. */
}

.flexbox {
  height: 100px;
  background-color: #f2f2f2;
}

.item {
  background-color: #ff9421;
  border-radius: 5px;
  padding: 20px;
}
Sección centrada

2. Distribución de los elementos

Flexbox tiene varias propiedades para aplicar en el contenedor y que permiten distribuir los elementos hijo en de distintas formas.

PropiedadValores
justify-contentstart | end | center | space-between | space-around | space-evenly
align-itemsstretch | start | end | center | baseline
align-content stretch | start | end | center | space-between | space-around | space-evenly
align-selfauto | start | end | center | stretch | baseline
flexbox-justify-content

justify-content: Define la alineación a lo largo del eje principal y ayuda a distribuir el espacio libre restante.


align-items: Define el comportamiento de la posición de los elementos a lo largo del eje transversal de la fila actual.


flexbox-align-content

align-content: Distribuye las filas dentro de un contenedor cuando hay espacio extra en el eje transversal.


flexbox-align-self

align-self: Sustituye el alineamiento de solo uno de los elementos.


3. Dirección de los ejes

Podemos utilizar 2 propiedades para modificar la dirección y el comportamiento de los elementos dentro de un contenedor flex.

PropiedadValoresDescripción
flex-directionrow | row-reverse | column | column-reverseDefine la dirección del contenedor
flex-wrapnowrap | wrap | wrap-reverseRedistribuye los elementos si no caben en una fila.
flex-flow<flex-direction> <flex-wrap>Es un atajo de las propiedades anteriores.

Podemos conseguir diseños modernos que no tienen nada que envidiar a otros frameworks de CSS como Bootstrap, Bulma o Semantic UI.

Desayuno
restaurant
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="cards">
  <div class="card">
    <div class="card-header">Desayuno</div>
    <div class="card-body">
      <i class="material-icons md-48">
        restaurant
      </i>
    </div>
    <div class="card-footer">
      <span>Comedor</span>
      <span>8:30</span>
    </div>
  </div>
</div>
.cards {
  display: flex;
  justify-content: center;
  flex: 1; /* Ocupa todo el espacio posible */
  flex-wrap: wrap; /* Si no caben más elementos en una fila, automáticamente saltará a la siguiente linea */
}

.card {
  width: 200px;                 
  display: flex;                
  flex-direction: column; /* Dirección en columna para el contenedor */
  border: 1px solid #ff9421;
  border-radius: 5px;                      
  margin: 10px;
}

.card-header {
  background-color: #ff9421;
  color: #212121;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  padding: 10px;
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}

.material-icons.md-48 { 
  font-size: 48px;
  color: #ff9421;
}

.card-footer {
  display: flex;
  justify-content: space-between; /* Los elementos se distribuyen equitativamente entre ellos*/
  padding: 5px 15px;
  background-color: #f7f7f7;
  border-radius: 0 0 5px 5px;
}

.card-footer span {
  color: #525252;
  font-weight: 600;
  padding: 10px 0 10px 0;
}

4. Propiedades de los elementos hijos

Hasta ahora, todas las propiedades que hemos visto (exceptuando al align-self) se aplican al contenedor padre. Las siguientes propiedades de ordenación y factores de crecimiento se aplican sobre los hijos.

PropiedadValoresDescripción
flex-grow0Especifica el factor de crecimiento de un elemento
flex-shrink1Especifica el factor de decrecimiento de un elemento
flex-basisauto (%, px, em…)Especifica el tamaño inicial de un elemento
order0Especifica el orden utilizado para disponer los elementos en su contenedor. 

1
2
3

Como podemos ver, El primer elemento (.item-1) se ha colocado al final del todo gracias a la propiedad order: 1. También es el doble de grande que la suma de las anchuras del resto de elementos, ya que se lo hemos indicado con la propiedad flex-grow: 2.

<div class="parent">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>
.parent {
  display: flex;
  flex: 1;
  justify-content: center;
}

.parent > div {
  width: 150px;
  height: 150px;
  margin: 15px;
  background-color: #ff9421;
}

.item-1 {
  order: 1; /* El item-1 se colocará al final, ya que el resto de elementos tienen asignado el valor 0 */
  flex-grow: 2; /* Se agrandará el doble que el resto de hijos */
}

.item-2 {
  flex: 1;
  /* Podemos escribir las tres propiedades en una sola línea */
  /* flex: <flex-grow> <flex-shrink> <flex-basis> */
}

.item-3 {
  flex: 1;
}

.item-1, .item-2, .item-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .parent {
    flex-direction: column;
    align-items: center; /* Ahora alinea horizontalmente ya que es el eje transversal */
  }
}

Si te fijas bien, el segundo y tercer elemento tienen la propiedad flex: 1. Esta propiedad es un atajo para indicar el flex-grow, flex-shrink y el flex-basis en una sola línea. Por defecto tiene como valor (0 1 auto).

5. Compatibilidad en navegadores

Como hemos mencionado al principio, Flexbox lleva muchos años en desarrollo y ya se ha convertido en un estándar de CSS. Por eso mismo, tiene una compatibilidad absoluta en todos los navegadores principales.

compatibilidad flexbox

Si quieres saber más sobre Flexbox, puedes acceder a la guía más completa y actualizada de Flexbox en el siguiente artículo o también puedes practicar con este entretenido juego.

Si te ha gustado, compártelo en las redes sociales!
Etiquetas: