La guía completa de Flexbox

Introducción

Nuestra guía completa sobre diseños de flexbox con CSS. Esta guía completa explica todo sobre flexbox, centrándose en los diferentes atributos posibles para el elemento principal (contenedor flexible) y los elementos secundarios (elementos flexibles). También incluye historial, demostraciones, plantillas y una tabla de compatibilidad de navegadores.

Contexto

El módulo de diseño Flexbox (una recomendación candidata del W3C de octubre de 2017) tiene como objetivo proporcionar una forma más eficiente de organizar, alinear y distribuir el espacio entre los elementos dentro de un contenedor, incluso cuando su tamaño es desconocido y/o dinámico (de ahí la palabra "flex").

La idea principal de un diseño flexible es permitir que el contenedor modifique el ancho y la altura (y el orden) de sus elementos para optimizar el espacio disponible (principalmente para adaptarse a diversos dispositivos y tamaños de pantalla). Un contenedor flexible expande los elementos para ocupar el espacio libre disponible o los contrae para evitar el desbordamiento.

Lo más importante es que el diseño de Flexbox es direccional, a diferencia de los diseños regulares (un bloque alineado verticalmente y en línea con base en un diseño horizontal). Si bien funcionan bien para páginas, carecen de la flexibilidad (sin ánimo de ofender) necesaria para aplicaciones grandes o complejas (especialmente al cambiar la orientación, redimensionar, estirar, contraer, etc.).

Nota: el diseño Flexbox es más adecuado para componentes de aplicación y diseños de pequeña escala, mientras que el diseño de cuadrícula está pensado para diseños de mayor escala.

Conceptos básicos y terminología

Dado que flexbox es un módulo completo y no una sola función, incluye muchas cosas, incluyendo su conjunto completo de propiedades. Algunas se configuran en el contenedor (el elemento padre, conocido como "contenedor flexible"), mientras que otras se configuran en los elementos secundarios (conocidos como "elementos flexibles").

Si el diseño "regular" se basa en direcciones de flujo tanto en bloque como en línea, el diseño flexible se basa en "direcciones de flujo flexibles". Consulte este formulario de especificación, donde se explica la idea principal del diseño flexible.

Los elementos se colocan a lo largo del eje principal (desde el inicio principal hasta el final principal) o del eje transversal (desde el inicio transversal hasta el final transversal).

• Eje principal: El eje principal del contenedor flexible es el eje principal a lo largo del cual se colocan los elementos flexibles. Tenga en cuenta que no es necesariamente horizontal. Depende de la propiedad flex-direction (ver más abajo).
• Inicio principal | Extremo principal: los elementos flexibles se colocan dentro del contenedor comenzando desde el inicio principal y llegando hasta el extremo principal.
• Tamaño original: el ancho o la altura de un elemento flexible, cualquiera que sea su dimensión original, corresponde al tamaño original del elemento. La propiedad de tamaño original del elemento flexible es "ancho" o "alto", la que sea su dimensión original.
• Eje transversal: El eje perpendicular al eje principal se denomina eje transversal. Su dirección depende de la dirección del eje principal.
• Inicio cruzado | final cruzado: las líneas flexibles se llenan con artículos y se colocan en el contenedor comenzando desde el lado de inicio cruzado del contenedor flexible y avanzando hacia el final cruzado.
• Tamaño transversal: El ancho o la altura de un elemento flexible, cualquiera que sea su valor en la dimensión transversal, corresponde al tamaño transversal del elemento. La propiedad de tamaño transversal corresponde a la que se encuentre en la dimensión transversal, ya sea "ancho" o "alto".

Características de Flexbox

Propiedades para padres
(recipiente)

Mostrar

Esto define un contenedor flexible. Según el valor dado, puede ser en línea o en bloque. Proporciona un contexto flexible para todos sus elementos secundarios directos.

.container {
display: flex; /* or inline-flex */
}

dirección flexible

Esto crea el eje principal, determinando así la dirección en la que se colocan los elementos flexibles dentro del contenedor flexible. Flexbox (salvo el ajuste opcional) es un concepto de diseño unidireccional. Piense en los elementos flexibles como si estuvieran mayormente en filas horizontales o columnas verticales.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

• ROW (predeterminado): De izquierda a derecha en izq. y de derecha a izquierda en dcha.
• inversión de fila: de derecha a izquierda en ltr. de izquierda a derecha en rtl.
• COLUMNA: Como la fila pero de arriba a abajo
• Columna invertida: como la fila inversa pero de abajo a arriba

Envoltura flexible

De forma predeterminada, todos los elementos flexibles intentan caber en una sola línea. Puede cambiar esto y permitir que los elementos se cierren con esta propiedad si es necesario.

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

• nowrap (predeterminado): todos los elementos flexibles se ajustarán en una línea
• Envolver: los elementos flexibles se envuelven en varias líneas, de arriba a abajo.
• wrap-reverse: los elementos flexibles se envuelven en varias líneas de abajo a arriba.

FLEX-Flow

Esta es una abreviatura de las propiedades flex-direction y flex-width, que juntas especifican los ejes principal y transversal del contenedor flexible. El valor predeterminado es row nowrap.

.container {
flex-flow: column wrap;
}

Justificar contenido

Esto especifica la alineación a lo largo del eje principal. Ayuda a distribuir el exceso de espacio en blanco cuando todos los elementos flexibles de una línea son inflexibles o flexibles, pero han alcanzado su tamaño máximo. También proporciona cierto control sobre la alineación de los elementos cuando estos desbordan la línea.

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (predeterminado): los artículos se empaquetan hacia el inicio de la dirección flexible.
• extremo flexible: los artículos se empaquetan hacia el final de la dirección flexible.
• INICIO: Los elementos se empaquetan hacia el inicio de la dirección del modo de escritura.
• FIN: Los elementos se empaquetan hacia el final de la dirección del modo de escritura.
• IZQUIERDA: Los artículos se empaquetan hacia el borde izquierdo del contenedor, a menos que no tenga sentido con la dirección de flexión, en cuyo caso actúa como inicio.
• DERECHA: Los artículos se empaquetan hacia el borde derecho del contenedor, a menos que tenga sentido ser flexible en esa dirección, entonces actúa como el final.
• CENTRO: Los elementos se centran a lo largo de la línea.
• Espacio entre: Los elementos se distribuyen uniformemente en la fila. El primer elemento está en la línea de salida y el último en la línea de meta.
• Espacio alrededor: Los elementos se distribuyen uniformemente en una línea con el mismo espacio a su alrededor. Tenga en cuenta que visualmente los espacios no son iguales, ya que todos los elementos tienen el mismo espacio a ambos lados. El primer elemento tendrá una unidad de espacio en el borde del contenedor, pero tendrá dos unidades de espacio entre el siguiente elemento, ya que este tiene su propio espaciado.
• Espacio uniforme: los elementos se distribuyen de tal manera que la distancia entre dos elementos (y la distancia a los bordes) es igual.

También hay dos palabras clave adicionales que puedes combinar con estos valores: seguro e inseguro. Usar seguro garantiza que, independientemente de cómo realices este tipo de posicionamiento, no puedas desplazar un elemento tan lejos de la página (por ejemplo, fuera de la parte superior) que impida navegar por el contenido (lo que se conoce como "pérdida de datos").

Alinear elementos

Esto define el comportamiento predeterminado de la disposición de los elementos flexibles a lo largo del eje transversal en la línea actual. Considérelo como la versión de justificación del contenido para el eje transversal (perpendicular al eje principal).

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• STREtch (predeterminado): estirar para llenar el contenedor (aún respeta el ancho mínimo/máximo)
• Inicio flexible / Inicio / Inicio automático: Los elementos se colocan al principio del eje transversal. La diferencia entre estos es sutil y se debe a que se respetan las reglas de dirección flexible o las reglas del modo de escritura.
• flex-end / end / self-end: Los elementos se colocan al final del eje transversal. La diferencia es sutil y se basa en respetar las reglas de dirección flexible frente a las reglas del modo de escritura.
• CENTRO: Los elementos se ubican en el eje transversal.
• Línea base: los elementos se alinean como sus líneas base

Alinear contenido

Cuando hay espacio adicional en el eje transversal, se alinean las líneas del contenedor flexible en el interior, de manera similar a cómo justify-content alinea elementos individuales en el eje principal.

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

• Normal (predeterminado): los elementos se empaquetan en su posición predeterminada como si no se hubiera establecido ningún valor.
• flex-start / start: elementos envueltos al comienzo del contenedor. flex-start (con más soporte) indica la dirección flexible mientras que start respeta la dirección del modo de escritura.
• flex-end / end: Elementos que se envuelven hasta el final del contenedor. (Más soporte) flex-end indica la dirección de flexión, mientras que end respeta la dirección del modo de escritura.
• CENTRO: Elementos que están en el centro del contenedor
• Espacio entre elementos: Los elementos están espaciados uniformemente. La primera línea está al principio del contenedor y la última al final.
• Espacio alrededor: los elementos se distribuyen uniformemente con el mismo espacio alrededor de cada línea.
• Espacio uniforme: los elementos se distribuyen uniformemente con el mismo espacio a su alrededor.
• estirar: Las líneas se estiran para ocupar el espacio restante.

Espacio, espacio entre filas, espacio entre columnas

La propiedad gap controla explícitamente el espacio entre elementos flexibles. Este espaciado solo se aplica entre elementos, no en los bordes exteriores.

.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}

Este comportamiento puede considerarse como un canal mínimo, de modo que si el canal es de alguna manera más grande (debido a algo como justify-content: spacing-between; ), entonces este espacio solo tendrá un efecto cuando ese espacio se vuelva más pequeño.

Esto no es exclusivo de Flexbox, los espacios también funcionan en diseños de cuadrícula y de varias columnas.

Prefijo Flexbox

Flexbox requiere algunos prefijos de proveedor para ser compatible con la mayoría de los navegadores. Esto no solo implica anteponer el prefijo de proveedor a los atributos, sino tener nombres y valores de propiedad completamente diferentes. Esto se debe a que la especificación de Flexbox ha cambiado con el tiempo, creando versiones "antiguas", "intermedias" y "nuevas".

Quizás la mejor forma de manejar esto es escribir con la sintaxis nueva (y final) y ejecutar su CSS a través de Autoprefixer, que hace un buen uso de los retrocesos.

Alternativamente, aquí hay un Sass @mixin para ayudar con algunos prefijos, que también te darán una idea de qué tipo de cosas hacer:

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val; 
-moz-box-ordinal-group: $val; 
-ms-flex-order: $val; 
-webkit-order: $val; 
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}

Ejemplos

Empecemos con un ejemplo muy sencillo que soluciona un problema casi cotidiano: el enfoque perfecto. Es facilísimo con Flexbox.

<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>

.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}

Esto se debe a que un margen autoajustado en un contenedor flexible ocupará espacio adicional. Por lo tanto, al configurarlo, el elemento quedará perfectamente centrado en ambos ejes.

Ahora usemos algunas propiedades más. Consideremos una lista de 6 elementos, todos con dimensiones fijas, pero con tamaño automático. Queremos que se distribuyan uniformemente en el eje horizontal para que, al redimensionar el navegador, todo se ajuste correctamente sin necesidad de solicitar contenido multimedia.

.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction 
and if we allow the items to wrap 
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}

Listo. Todo lo demás es solo cuestión de estilo. A continuación se muestra un lápiz. Asegúrate de ir a CodePen y ajustar el tamaño de las ventanas para ver qué sucede.

Probemos algo diferente. Imaginemos que tenemos un elemento de navegación alineado a la derecha en la parte superior de nuestro sitio web, pero queremos centrarlo en pantallas medianas y tener una sola columna en dispositivos pequeños. Es bastante sencillo.

/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}

Probemos algo mejor y experimentemos con la flexibilidad de los elementos flexibles. ¿Qué tal un diseño de 3 columnas, enfocado en dispositivos móviles, con encabezado y pie de página de ancho completo? Independientemente del orden de origen.

<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>

.wrapper {
display: flex;
flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}

/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}