Usando flexbox para componer aplicaciones web

Usar flexbox puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes <div>, el posicionamiento absoluto, y los hacks de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de CSS. Algunos ejemplos básicos de casos de uso:

• Quieres centrar un elemento en la mitad de una página
• Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro
• Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla

Este artículo sólo aborda el uso de flexbox con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee la guía más general para usar cajas flexibles de CSS.

Conceptos básicos

Con flexbox puedes hacer que los elementos dentro de cualquier <div> fluyan estableciendo la propiedad display como flex y luego dando a la propiedad flex-flow el valor row, si deseas que los elementos fluyan horizontalmente, o el valor column, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor wrap.

Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad flex. Generalmente querrás utilizar uno de los tres siguientes valores:

• Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza flex: none que se expande a 0 0 auto.
• Si deseas explícitamente dimensionar un elemento, usa flex: 0 0 tamaño. Por ejemplo: flex 0 0 60px.
• Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza flex: auto. Se expande a 1 1 auto.

Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.

Centrando un elemento en una página

Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.

Contenido CSS

.vertical-box {
  display: flex;
  height: 400px;
  width: 400px;
  flex-flow: column;
}
.horizontal-box {
  display: flex;
  flex-flow: row;
}
.spacer {
  flex: auto;
  background-color: black;
}
.centered-element {
  flex: none;
  background-color: white;
}

Contenido HTML

<div class="vertical-box">
  <div class="spacer"></div>
  <div class="centered-element horizontal-box">
    <div class="spacer"></div>
    <div class="centered-element">Centered content</div>
     <div class="spacer"></div>
  </div>
  <div class="spacer"></div>
</div>

Resultado

Haciendo fluir verticalmente un conjunto de contenedores

Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad flex del contenido como auto y la misma propiedad flex de la cabecera y el pie como none.

Contenido CSS

.vertical-box {
  display: flex;
  height: 400px;
  width: 400px;
  flex-flow: column;
}
.fixed-size {
  flex: none;
  height: 30px;
  background-color: black;
  text-align: center;
}
.flexible-size {
  flex: auto;
  background-color: white;
}

Contenido HTML

<div id="document" class="vertical-box">
  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
  <div id="flexible-content" class="flexible-size"></div>
  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
</div>

Contenido JavaScript

var height = 400;
document.getElementById('increase-size').onclick=function() {
  height += 10;
  if (height > 500) height = 500; 
  document.getElementById('document').style.height = (height + "px");
}

document.getElementById('decrease-size').onclick=function() {
  height -= 10;
  if (height < 300) height = 300; 
  document.getElementById('document').style.height = (height + "px");
}

Resultado

Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.

Creando un contenedor que colapse horizontalmente

En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad flex-flow el valor wrap.

Contenido CSS

.horizontal-container {
  display: flex;
  width: 300px;
  flex-flow: row wrap;
}
.fixed-size {
  flex: none;
  width: 100px;
  background-color: black;
  color: white;
  text-align: center;
}

Contenido HTML

<div id="container" class="horizontal-container">
  <div class="fixed-size">Element 1</div>
  <div class="fixed-size">Element 2</div>
  <div class="fixed-size">Element 3</div>
</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>

Contenido JavaScript

var width = 300;

document.getElementById('increase-size').onclick=function() {
  width += 100;
  if (width > 300) width = 300; 
  document.getElementById('container').style.width = (width + "px");
}

document.getElementById('decrease-size').onclick=function() {
  width -= 100;
  if (width < 100) width = 100; 
  document.getElementById('container').style.width = (width + "px");
}

Resultado

Ver también

• Usando cajas flexibles CSS