Guía

Una guía completa de Flexbox

Última actualización
12 de junio de 2020

Nuestra guía completa para el diseño de CSS flexbox. Esta guía completa explica
todo sobre flexbox, enfocándose en todas las diferentes propiedades posibles para el
elemento primario (el contenedor flexible) y los elementos secundarios (los
elementos flexibles). También incluye historial, demostraciones, patrones y una
tabla de soporte del navegador.

Patrocinador mensual

Gracias, Mailchimp!
Integre sus datos de usuario y marketing con más de 200 aplicaciones
comerciales populares.

▶ Antecedentes (#flexbox-background)

▶ Conceptos básicos y terminología (#flexbox-basics)

¡Consigue el póster!
¿Hace referencia mucho a esta guía? Fije una copia en la pared de la oficina.

Comprar póster (/product/css-flexbox-poster/)

 (/product/css-flexbox-
poster/)
Propiedades para el padre
(contenedor flexible)

monitor
Esto define un contenedor flexible; en línea o bloque dependiendo del valor dado.
Permite un contexto flexible para todos sus hijos directos.

CSS

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

Tenga en cuenta que las columnas CSS no tienen efecto en un contenedor flexible.

dirección flexible

Esto establece el eje principal, definiendo así la dirección en la que se colocan los
elementos flexibles en el contenedor flexible. Flexbox es (aparte del envoltorio
opcional) un concepto de diseño de una sola dirección. Piense en los elementos
flexibles como distribuidos principalmente en filas horizontales o columnas
verticales.

CSS

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

• row (predeterminado): de izquierda a derecha en ltr ; de derecha a izquierda

en rtl
• row-reverse : de derecha a izquierda en ltr ; de izquierda a derecha en rtl
• column : igual que row pero de arriba a abajo
• column-reverse : igual que row-reverse pero de abajo hacia arriba

envoltura flexible

De forma predeterminada, todos los elementos flexibles intentarán encajar en una

línea. Puede cambiar eso y permitir que los elementos se ajusten según sea
necesario con esta propiedad.

CSS

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

• nowrap (predeterminado): todos los elementos flexibles estarán en una línea

• wrap : los elementos flexibles se ajustarán en varias líneas, de arriba a abajo.
• wrap-reverse : los elementos flexibles se ajustarán en varias líneas de abajo
hacia arriba.

Hay algunas demostraciones visuales de flex-wrapaquí (https://css-

tricks.com/almanac/properties/f/flex-wrap/) .

flujo flexible
Esta es una abreviatura de las propiedades flex-direction y flex-wrap , que
juntas definen los ejes principal y transversal del contenedor flexible. El valor por
defecto es row nowrap .

CSS

.container {
flex-flow: column wrap;
}

justificar-contenido
Esto define la alineación a lo largo del eje principal. Ayuda a distribuir las sobras de
espacio libre extra cuando todos los elementos flexibles en una línea son inflexibles
o son flexibles pero han alcanzado su tamaño máximo. También ejerce cierto
control sobre la alineación de los elementos cuando desbordan la línea.

CSS

.container {
justify-content: flex-start | flex-end | center | space-between | space
}

• flex-start (predeterminado): los elementos se empaquetan hacia el inicio de

la dirección flexible.
• flex-end : los artículos se empaquetan hacia el final de la dirección de flexión.
• start : los artículos se empaquetan hacia el inicio de la writing-mode dirección.
• end : los artículos se empaquetan hacia el final de la writing-mode dirección.
• left : los artículos se empaquetan hacia el borde izquierdo del contenedor, a
menos que eso no tenga sentido con el flex-direction , entonces se comporta
como start .
• right : los artículos se empaquetan hacia el borde derecho del contenedor, a
menos que eso no tenga sentido con el flex-direction , entonces se comporta
como start .
• center : los elementos se centran a lo largo de la línea
• space-between : los artículos se distribuyen uniformemente en la línea; el
primer artículo está en la línea de inicio, el último artículo en la línea final
• space-around : los elementos se distribuyen uniformemente en la línea con igual
espacio a su alrededor. Tenga en cuenta que visualmente los espacios no son
iguales, ya que todos los elementos tienen el mismo espacio en ambos lados. El
primer elemento tendrá una unidad de espacio contra el borde del contenedor,
pero dos unidades de espacio entre el siguiente elemento porque el siguiente
elemento tiene su propio espacio que se aplica.
• space-evenly : los elementos se distribuyen de modo que el espacio entre dos
elementos (y el espacio hasta los bordes) sea igual.

Tenga en cuenta que el soporte del navegador para estos valores está matizado. Por
ejemplo, space-between nunca obtuve soporte de algunas versiones de Edge y start
/ end / left / right todavía no están en Chrome. MDN tiene cuadros detallados
(https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) . Los
valores son más seguros flex-start , flex-end y center .

También hay dos palabras clave adicionales que puede vincular con estos valores:
safe y unsafe . El uso safe garantiza que, independientemente de cómo realice
este tipo de posicionamiento, no puede empujar un elemento de modo que se
muestre fuera de la pantalla (por ejemplo, desde la parte superior) de tal manera
que el contenido no pueda desplazarse también (llamado "pérdida de datos") .

alinear elementos
Esto define el comportamiento predeterminado de cómo se disponen los elementos
flexibles a lo largo del eje transversal en la línea actual. Piense en ello como la
justify-content versión para el eje transversal (perpendicular al eje principal).

CSS

.container {
align-items: stretch | flex-start | flex-end | center | baseline | firs
}

• stretch (predeterminado): estirar para llenar el contenedor (aún respetar el

ancho mínimo / ancho máximo)
• flex-start / start / self-start : los elementos se colocan al comienzo del eje
transversal. La diferencia entre estos es sutil y se trata de respetar las flex-
direction reglas o las writing-mode reglas.
• flex-end / end / self-end : los elementos se colocan al final del eje transversal.
La diferencia nuevamente es sutil y se trata de respetar las flex-
direction reglas versus las writing-mode reglas.
• center : los elementos se centran en el eje transversal
• baseline : los elementos están alineados como sus líneas de base alineadas

los safe unsafe palabras clave y modificador se pueden usar junto con el resto de
estas palabras clave (aunque tenga en cuenta la compatibilidad con el navegador
(https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) ), y tratar de
ayudarlo a evitar alinear elementos de modo que el contenido se vuelva inaccesible.

alinear contenido

Esto alinea las líneas de un contenedor flexible dentro cuando hay espacio
adicional en el eje transversal, de forma similar a cómo justify-content alinea los
elementos individuales dentro del eje principal.

Nota: esta propiedad no tiene efecto cuando solo hay una línea de elementos
flexibles.
 CSS

.container {
align-content: flex-start | flex-end | center | space-between | space-a
}

• flex-start / start : artículos embalados al inicio del contenedor. El (más

compatible) flex-start rinde homenaje a flex-direction mientras que
start honra la writing-mode dirección.
• flex-end / end : artículos embalados hasta el final del contenedor. El (más
soporte) flex-end honra el flex-direction extremo while honra la writing-
mode dirección.
• center : elementos centrados en el contenedor
• space-between : artículos distribuidos uniformemente; la primera línea está al
comienzo del contenedor mientras que la última está al final
• space-around : elementos distribuidos uniformemente con igual espacio
alrededor de cada línea
• space-evenly : los elementos se distribuyen uniformemente con igual espacio a
su alrededor
• stretch (predeterminado): las líneas se estiran para ocupar el espacio restante

Las palabras clave safe y unsafe modificador se pueden usar junto con el resto de
estas palabras clave (aunque tenga en cuenta la compatibilidad con el navegador
(https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) ), y tratar de
ayudarlo a evitar alinear elementos de modo que el contenido se vuelva inaccesible.

Propiedades para los niños

(artículos flexibles)
(artículos flexibles)

orden

Por defecto, los elementos flexibles se presentan en el orden de origen. Sin

embargo, la order propiedad controla el orden en que aparecen en el contenedor
flexible.

CSS

.item {
order: 5; /* default is 0 */
}

flex-grow
Esto define la capacidad de un elemento flexible de crecer si es necesario. Acepta
un valor sin unidades que sirve como proporción. Dicta qué cantidad de espacio
disponible dentro del contenedor flexible debe ocupar el artículo.

Si todos los elementos se han flex-grow establecido en 1, el espacio restante en el

contenedor se distribuirá por igual a todos los niños. Si uno de los niños tiene un
valor de 2, el espacio restante ocuparía el doble de espacio que los demás (o al
menos lo intentará).

CSS

.item {
flex-grow: 4; /* default 0 */
}

Los números negativos no son válidos.

encogimiento flexible
Esto define la capacidad de un elemento flexible de encogerse si es necesario.

CSS

.item {
flex-shrink: 3; /* default 1 */
}

Los números negativos no son válidos.

base flexible
Esto define el tamaño predeterminado de un elemento antes de que se distribuya el
espacio restante. Puede ser una longitud (por ejemplo, 20%, 5rem, etc.) o una
l b l l b l i ifi i i i d dd h l
palabra clave. La auto palabra clave significa "mirar mi propiedad de ancho o alto"
(que fue hecha temporalmente por la main-size palabra clave hasta que quedó en
desuso). Los content medios de la palabra clave “tamaño se basa en el contenido
del elemento” - esta palabra clave no está debidamente apoyado, sin embargo, por
lo que es difícil de probar y más difícil saber lo que sus hermanos max-content ,
min-content y fit-content lo hacen.

CSS

.item {
flex-basis: | auto; /* default auto */
}

Si se establece en 0 , el espacio adicional alrededor del contenido no se tiene en

cuenta. Si se establece en auto , el espacio adicional se distribuye en función de su
flex-grow valor. Ver este gráfico. (https://www.w3.org/TR/css3-
flexbox/images/rel-vs-abs-flex.svg)

flexionar
Esta es la abreviatura de flex-grow, flex-shrink y flex-basis combinado. Los
parámetros segundo y tercero ( flex-shrink y flex-basis ) son opcionales. El
valor predeterminado es 0 1 auto , pero si lo configura con un solo valor numérico,
es como 1 0 .

CSS

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Se recomienda que utilice esta propiedad abreviada en lugar de establecer las

propiedades individuales. La taquigrafía establece los otros valores de manera
inteligente.
 alinearse

Esto permite que la alineación predeterminada (o la especificada por align-

items ) se anule para elementos flexibles individuales.

Consulte la align-items explicación para comprender los valores disponibles.

CSS

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

Tenga en cuenta que float , clear y vertical-align no tiene ningún efecto en un

elemento flexible.

▶ Ejemplos (#flexbox-examples)

▶ Prefijo de Flexbox (#flexbox-sass)

▶ Propiedades Relacionadas (#flexbox-related)

▶ Otros recursos (#flexbox-resources)

▶ Loco (#flexbox-bugs)
Soporte de navegador
Desglosado por "versión" de flexbox:

• (nuevo) significa la sintaxis reciente de la especificación (p display: flex; . ej. )

• (tweener) significa una sintaxis no oficial extraña de 2011 (p display: flexbox; . ej. )
• (antiguo) significa la sintaxis anterior de 2009 (p display: box; . ej. )

ES Android
Cromo Safari Firefox Ópera Borde iOS
DECIR e

10
20- 3.1+ 2-21 2.1+ 3.2+
(tweener
(antiguo) (antiguo) (antiguo) 12.1+ 17+ (antiguo) (antiguo)
)
21+ 6.1+ 22+ (nuevo) (nuevo) 4.4+ 7.1+
11+
(nuevo) (nuevo) (nuevo) (nuevo) (nuevo)
(nuevo)

Blackberry browser 10+ es compatible con la nueva sintaxis.