El modelo de caja flexible

1. Los diferentes tipos de contenedores

Una disposición flexible se crea usando un contenedor al que se aplica la propiedad CSS display. Esta propiedad acepta los valores flex o inline-flex. Dicho contenedor se considera el elemento padre del diseño.

Desde el momento en que un contenedor tiene asignado el valor flex o inline-flex, todos los elementos hijos que contiene se convierten automáticamente en elementos flexibles. En cuanto a la terminología, se habla de flex-container para el elemento padre y de flex-items para los elementos hijos.

El elemento contenedor padre que utiliza el valor de visualización flex puede ser cualquier elemento HTML: <div>, <nav>, <section>... En los primeros ejemplos, se emplean contenedores <div> por simplicidad, aunque más adelante se utilizarán otros elementos HTML con mayor valor semántico.

2. El contenedor con display: flex

He aquí la estructura HTML de un primer ejemplo muy sencillo de una disposición flexible:

<div id="contenedor1">   
  <p class="p1">Un. Maecenas faucibus...</p>   
  <p class="p2">Dos. Fusce dapibus, tellus...</p>   
  <p class="p3">Tres. Duis mollis, est non...</p>   
  <p class="p4">Cuatro. Nulla vitae elit...

1. La dirección principal

La propiedad flex-direction permite definir la dirección principal en el contenedor flexible padre. Esta dirección principal indica cómo se colocarán los elementos hijos en el contenedor padre. El eje principal puede ser horizontal o vertical.

Los valores que acepta la propiedad flex-direction son row, row-reverse, column y column-reverse. La propiedad flex-direction utiliza el valor row por defecto. Este valor proporciona una dirección horizontal para la posición de los elementos hijos. Por lo tanto, los flex-items se muestran horizontalmente, en línea, uno al lado del otro, en el orden en que se introducen en el código HTML.

He aquí un primer ejemplo:

<div id="contenedor1">   
  <p class="p1">Uno. Maecenas faucibus mollis interdum...</p>   
  <p class="p2">Dos. Fusce dapibus, tellus ac cursus commodo...</p> 
  <p class="p3">Tres. Duis mollis, est non commodo luctus...</p>   
</div> 

Las reglas CSS son las siguientes:

#contenedor1 {    
  display: flex;   
  flex-direction: row;   
  width: 600px;   
  border: 1px solid #000;   
  background-color: #eee;   
}   
p {   
  margin: 0;   
}   
.p1 {   
  background-color: antiquewhite;   
}   
.p2 {   
  background-color: azure;   
}   
.p3 {   
  background-color: cornsilk;   
} 

Y esta es la pantalla resultante:

Al ser muy preciso, la visualización de los elementos hijos es horizontal y de izquierda a derecha. Los elementos hijos se colocan...

1. Alineaciones en el eje principal horizontal

La propiedad justify-content se usa para gestionar la alineación de los elementos hijos en la dirección principal definida en el elemento padre mediante la propiedad flex-direction.

Para la propiedad justify-content, los valores que pueden utilizarse son: flex-start, flex-end, center, space-between y space-around. El valor predeterminado es flex-start.

He aquí la estructura HTML, que consiste en una simple lista <ul> en este ejemplo:

<ul id="contenedor-lista">   
  <li>Uno</li>   
  <li>Dos</li>   
  <li>Tres</li>   
  <li>Cuatro</li>   
  <li>Cinco</li>   
</ul> 

Y estas son las reglas CSS utilizadas:

#contenedor-lista {   
  display: flex;   
  width: 400px;   
  border: 1px solid #000;   
  background-color: #eee;   
  padding: 10px;   
}   
#contenedor-lista li {   
  list-style: none;   
  border: 1px solid #000;   
  padding: 5px;   
  background-color: white;   
} 

Tenga en cuenta en este ejemplo que se utilizan los valores predeterminados de las propiedades flex-direction: row y flex-wrap: nowrap, ya que no se declaran en la regla CSS.

He aquí la pantalla resultante:

De forma predeterminada, el contenedor flexible primario usa la propiedad justify-content: flex-start.

#contenedor-lista {  
  display: flex;   
  justify-content: flex-start;   
  width: 400px;   
  border: 1px solid #000;   
  background-color: #eee;   
  padding: 10px;   
} 

Este valor indica que los elementos hijos están alineados a la izquierda del elemento padre, al principio del eje principal para ser precisos.

El valor flex-end indica que los elementos hijos están alineados a la derecha del elemento padre, al final del eje principal. He aquí la pantalla resultante:

El valor center indica que los elementos hijos están centrados en el elemento padre...

1. Las propiedades individuales

En el momento en que un contenedor posee la propiedad y el valor display: flex, todos los elementos que contiene se convierten en «hijos flexibles» (flex-items). A estos elementos hijos se les pueden aplicar propiedades comunes, pero también es posible aplicar propiedades CSS flexibles individuales a un hijo concreto.

2. El orden de visualización de los hijos

Los elementos hijos de un contenedor flexible se muestran en el orden en que se han escrito en la estructura HTML.

<ul id="contenedor-lista">   
  <li>Uno</li>   
  <li>Dos</li>   
  <li>Tres</li>   
  <li>Cuatro</li>   
  <li>Cinco</li>   
</ul> 

He aquí las reglas CSS utilizadas:

#contenedor-lista {   
 display: flex;   
 flex-flow: row wrap;   
 justify-content: space-around;   
 width: 300px;   
 border: 1px solid #000;   
 background-color: #eee;   
 padding: 10px;   
}   
#contenedor-lista li {   
 list-style: none;   
 border: 1px solid #000;   
 padding: 5px;   
 background-color: white;   
} 

Y esta es la pantalla resultante:

Los elementos hijos <li> se muestran en el mismo orden en que aparecen en el código HTML.

La propiedad order permite modificar dicho orden. El valor predeterminado es 0 e indica el orden definido en el HTML. Con el valor 1, el elemento correspondiente se coloca en la última posición, considerando que todos los demás elementos usan el valor predeterminado 0. Con el valor de -1, el elemento correspondiente se coloca en la primera posición, con la misma consideración anterior. En otras palabras, el elemento hijo con el valor más bajo se mostrará al principio, y el que tenga el valor más alto se mostrará al final.

He aquí el código modificado para este ejemplo:

<ul id="contenedor-lista">   
  <li>Uno</li>   
  <li...

1. Las disposiciones obtenidas

Este es el ejemplo sencillo que vamos a construir. El diseño ocupa toda la pantalla y cuenta con cuatro zonas diferenciadas: una cabecera, una columna lateral a la izquierda con texto, una zona central para un artículo, una columna lateral a la derecha con la navegación y un pie de página.

Así es como se ve en una pantalla grande:

Este diseño es responsivo; así es como se ve en una pantalla más pequeña:

En la visualización para pantalla pequeña, la columna de navegación, que inicialmente se encontraba a la derecha, se muestra ahora debajo de la cabecera.

2. La estructura flexible del diseño

He aquí el esquema de la estructura de este diseño:

Todo el diseño está insertado dentro del elemento <body>. La cabecera está, lógicamente, incluida en el elemento <header>, y lo mismo ocurre con el pie de página, que se encuentra dentro del elemento <footer>. La zona central está insertada en el elemento <main>, que incluye la columna lateral izquierda dentro del elemento <aside>, la zona del artículo dentro del elemento <article> y la columna lateral derecha para la navegación dentro del elemento <nav>. Por supuesto, esta estructura es solo un ejemplo y puede adaptarse a otras necesidades.

Con el esquema anterior, queda claro que hay dos elementos estructurales, dos contenedores que deben ser flexibles:

3. Las propiedades del elemento <body>

El primer contenedor es el elemento <body>. Esta es la regla CSS asociada con él:

body {   
 display: flex;   
 flex-direction: column;   
 min-height: 100vh;   
} 

La propiedad display: flex proporciona un diseño flexible.

De forma predeterminada, la disposición de los elementos...