Flexbox CSS: Guía Completo, Elementos y Ejemplos

Flexbox tiene como meta ser una forma más eficiente de crear ¿Qué es el Flexbox? es un módulo completo y no una propiedad
diseños, alinear y distribuir espacios entre ítems en un única; algunos de ellos deben declararse en el contenedor (el
contenedor, incluso cuando las dimensiones de esos ítems son elemento principal, que llamamos de flex container), mientras
desconocidas y/o dinámicas (en virtud de eso el término "flex"). que otros deben declararse en los elementos secundarios (el flex
ítems). Si el diseño "estándar" se basa en las direcciones block e
inline, el diseño Flex se basa en direcciones de "flex flow".

Diagrama de especificación, explica la idea

central del diseño Flex

Elementos
 Eje principal: el eje principal de un flex container es el  Eje transversal: El eje perpendicular al eje principal se
eje primario y a lo largo de él son insertados los flex llama eje transversal. Su dirección depende de la
ítems. Precaución: El eje principal no es necesariamente dirección del eje principal.
horizontal; Dependerá de la propiedad flex-direction.  Cross-start | cross-end: Líneas flex se llenan con ítems y
 Main-start | main-end: los flex ítems se insertan en el se agregan al contenedor, comenzando desde el lado
contenedor empezando por el lado start, dirigiéndose cross start del flex container hacia el lado cross end.
hacia el lado end.  Cross size: El ancho o alto de un flex ítem, dependiendo
 Tamaño principal: El ancho o alto de un flex ítem, de lo que haya en la dimensión transversal, es el cross
dependiendo de la dirección del contenedor, es el size del ítem. La propiedad cross size puede ser el ancho
tamaño principal del ítem. La propiedad de tamaño o el alto del ítem, lo que se encuentre en la transversal.
principal de un flex ítem puede ser tanto width como  Flex container es el elemento que involucra su
height, dependiendo de cuál esté en la dirección estructura. Tu defines que un elemento es un Flex
principal. Container con la propiedad display y valores flex o
inline-flex.

Código <div class="flex-container">

<div>1</div>
<div>2</div>
<div>3</div>
</div>
.flex-container {
display: flex;
}

Flex Ítem son elementos secundarios del flex container.

Ejes o Axes son las dos direcciones básicas que existen en un Flex Container: main axis, o eje principal, y cross axis, o eje transversal.
 Propiedades del elemento principal

Cuando usamos el Flexbox, es muy importante saber qué

propiedades se declaran en el elemento principal (por
ejemplo, una div que contendrá los elementos a alinear) y
cuáles se declararán en los elementos secundarios. A
continuación, se muestran las propiedades que deben
declararse utilizando el elemento principal como selector
(para alinear los elementos secundarios):

Display
Esta propiedad define un flex container; inline o block dependiendo de los valores pasados. Coloca todos los elementos
secundarios directos en un contexto Flex.

.container {
display: flex; */\* or inline-flex \*/*
}
Tenga en cuenta que la propiedad CSS columns no tiene efecto en un flex container.

Flex-direction inicialmente posicionaids o en líneas horizontales o en

columnas verticales.

 .flex-container { flex-direction: row | row-reverse |

column | column-reverse; }
 row (estándar): de la izquierda a la derecha en ltr
(left to right), de la derecha a la izquierda en rtl
(right to left)
 row-reverse: de la derecha a la izquierda en ltr, de
la izquierda a la derecha en rtl
Establece el eje principal, definiendo así la dirección en la
 column: mismo que row, pero de arriba a abajo
que los flex ítems están alineados en el flex container.
 column-reverse: mismo que row-reverse pero de
Flexbox es (con la excepción de un wrapping opcional) un
abajo hacia arriba.
concepto de diseño unidireccional. Piensa en los flex ítems

Flex-wrap

.flex-container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
 nowrap (estándar): todos los flex ítems estarán en
una sola línea
 wrap: los flex ítems se dividirán en múltiples
líneas, de arriba a abajo
Por estándar, los flex ítems todos intentarán encajarse en  wrap-reverse: los flex ítems se dividirán en
una sola línea. Con esta propiedad puedes modificar este múltiples líneas de abajo hacia arriba
comportamiento y permitir que los ítems pasen a la
siguiente línea según sea necesario.

Flex-flow
La propiedad flex-flow es una propiedad shorthand (una misma declaración incluye varios valores relacionados con más de
una propiedad) que incluye flex-direction y flex-wrap. Determina cuáles serán los ejes principal y transversal del contenedor. El
valor estándar es row nowrap.
.flex-container { flex-flow: row nowrap | row wrap | column nowrap | column wrap; }

Justify-content
.flex-container {
justify-content: flex-start | flex-end | center | space-
between | space-around | space-evenly;
}

Esta propiedad define la alineación de los ítems a lo largo del eje principal. Ayuda a distribuir el espacio libre que queda en el
contenedor, ya sea que todos los flex ítems de una línea sean inflexibles o flexibles, pero ya hayan alcanzado su tamaño
máximo. También ejerce cierto control sobre la alineación de los ítems cuando sobrepasan el límite de la línea. flex-start
(estándar): los ítems se alinean a lo largo del borde de inicio (start) de acuerdo con la flex-direction del contenedor.

 Flex-end: los ítems se alinean a lo largo del borde  Space-between: los ítems se distribuyen
final (end) de acuerdo con la flex-direction del uniformemente a lo largo de la línea; el primer
contenedor. ítem al lado del borde inicial de la línea, el último
 start: los ítems se alinean a lo largo del borde de ítem al lado del borde final de la línea.
inicio de la dirección del writing-mode (modo de  Space-around: los ítems se distribuyen en línea
escritura). con el mismo espacio entre ellos. Tenga en cuenta
 end: los ítems se alinean a lo largo del borde final que visualmente el espacio puede no ser igual, ya
de la dirección del writing-mode (modo de que todos los ítems tienen la misma cantidad de
escritura). espacio en ambos lados: el primer ítem solo tendrá
 left: los ítems están alineados a lo largo del borde una unidad de espacio a lo largo del borde del
izquierdo del contenedor, a menos que esto no contenedor, pero dos unidades de espacio entre él
tenga sentido con el flex-direction que se está y el siguiente ítem, porque el ítem siguiente
utilizando. En este caso, se comporta como start. también tiene su propio espaciamiento que se está
 right: los ítems están alineados a lo largo del borde aplicando.
derecho del contenedor, a menos que esto no  Space-evenly: los ítems se distribuyen de manera
tenga sentido con el flex-direction que se está que el espacio entre dos elementos cualesquiera
utilizando. En este caso, se comporta como start. en la línea (incluso entre los ítems y los bordes)
 center: los ítems están centrados en la línea. sea igual.

Nota: el soporte dado por los navegadores para estos valores es difuso. Por ejemplo, space-between no tiene soporte en
ninguna versión de Edge (hasta la elaboración de este tutorial) y start / end / left / right aún no se han implementado en
Chrome. Para obtener tablas detalladas, consulte MDN. Los valores más seguros son flex-start, flex-end y center.
También hay dos palabras clave adicionales que puedes usar junto con estos valores: safe y unsafe. Safe asegura que,
independiente de cómo hagas este tipo de posicionamiento, no sea posible "empujar" un elemento y hacer con que sea
renderizado hacia afuera de la pantalla (por ejemplo, sobre el tope) de una manera que haga con que el contenido sea
imposible de mover con el desplazamiento de la pantalla (el CSS llama a esto de "pérdida de datos").

Align-ítems
Establece el comportamiento estándar de cómo flex ítems
están alineados según el eje transversal (cross axis). En
cierto modo, funciona de manera similar al justify-content,
pero en el eje transversal (perpendicular al eje principal).
 . .flex-container {
align-items: stretch | flex-start | flex-end | center |
baseline;
}
 baseline: ítems se alinean de acuerdo con sus
baselines.
 Stretch (estándar): estira los ítems para llenar el
contenedor, respetando el min-width/max-width).
 Flex-start/start/self-start: ítems se posicionan al Los modificadores safe y unsafe se puede usar junto con
inicio del eje transversal. La diferencia entre ellos todas estas palabras clave (por favor verifique el soporte
es sutil y se refiere a las reglas de flex-direction o de cada navegador) y sirven para evitar cualquier
writing-mode. alineación de elementos que haga con que el contenido sea
 center: ítems se centran en el eje transversal. inaccesible (por ejemplo, fuera de la pantalla).

Align-content
Organiza las líneas dentro de un flex container cuando hay espacio adicional en el eje transversal, similar a cómo justify-
content alinea ítems individuales dentro del eje principal.

Importante: Esta propiedad no tiene efecto cuando solo hay una línea de flex ítems en el contenedor.

.flex-container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
 flex-start / start: ítems alineados con el inicio del contenedor. El valor (con mayor soporte de los navegadores) flex-
start se guía por la flex-direction, mientras que start se guía por la dirección del writing-mode.
 Flex-end/end: ítems alineados con el final del contenedor. El valor (con mayor soporte de los navegadores) flex-end se
guía por la flex-direction, mientras que end se guía por la dirección del writing-mode.
 center: ítems centrados en el contenedor.
 space-between: ítems distribuidos uniformemente; la primera línea al inicio del contenedor y la última línea al final
del contenedor.
 space-around: ítems distribuidos uniformemente con el mismo espaciamiento entre cada línea.
 space-evenly: elementos distribuidos uniformemente con el mismo espaciamiento entre ellos.
 stretch (estándar): ítems en cada línea se estiran para ocupar el espacio remanente entre ellas.
Los modificadores safe y unsafe se puede usar junto con todas estas palabras clave (por favor verifique el soporte de cada
navegador) y sirven para evitar cualquier alineación de elementos que haga con que el contenido sea inaccesible (por ejemplo,
fuera de la pantalla).

Propiedades de los elementos secundarios

A continuación, veremos propiedades que deben declararse teniendo como selector los elementos secundarios, es decir:

 1
 2
 3
Esto significa que, donde hay un elemento principal con propiedad flex (o flex-container), también puede asignar propiedades
flex específicas a elementos secundarios (flex-ítem).
Puede definir las propiedades a continuación para solo uno de los elementos secundarios a través de un identificador, como
una clase específica.
Order
Determina el orden en que aparecerán los elementos.

.flex-item { Por estándar los flex ítems, se organizan en la pantalla en

order: <número>; */\* el orden de código. Pero la propiedad order controla el orden
valor estándar es 0 \*/* en que aparecen en el contenedor.
}

Flex-grow
manera uniforme entre todos. Si uno de los ítems tiene el
valor 2, ocupará el doble de espacio en el contenedor que
los demás (o al menos intentará hacerlo).
Define la habilidad de un flex ítem de crecer, según el caso.
El valor de esta propiedad es un valor numérico sin .flex-item {
indicación de unidad, que se utiliza para calcular la flex-grow: <numero>; */\* el valor default(estándar) es 0 \
*/*
proporción. Este valor dicta la cantidad de espacio
}
disponible en el contenedor que ocupará el ítem.
Si todos los ítems tienen flex-grow establecido en 1, el
La propiedad no acepta valores negativos.
espacio remanente en el contenedor se distribuirá de

Flex-shrink Flex-basis
Establece la habilidad de un flex ítem para contraerse, Establece el tamaño estándar de un elemento antes de que
según el caso. .flex-item { flex-shrink: <número>; */\* el se distribuya el espacio remanente del contenedor. Puede
valor estándar es 0 \*/* } ser un largo (por ejemplo, 20%, 5rem, etc.) o una palabra
clave. La palabra clave auto significa "observe mis
La propiedad no acepta valores negativos. propiedades de altura o ancho" (lo que era hecho por la
palabra clave t main-size, que fue depreciada). La palabra
clave content significa "establezca el tamaño según el
contenido interno del ítem"; esta palabra clave aún no
tiene mucho soporte, por lo que no es fácil de probar, al
igual que sus relacionadas: max-content, min-content y fit-
content.

.flex-item {
flex-basis: flex-basis: | auto; */\* el valor estándar es
auto \*/*
}

Con el valor 0, el espacio adicional alrededor del contenido

no se considera. Con el valor de auto, el espacio adicional
se distribuye con base en el valor de flex-grox del ítem.
Flex
Esta es la propiedad shorthand para flex-grow, flex-shrink y flex-basis, combinadas. El segundo y tercer parámetros (flex-
shrink y flex-basis) son opcionales. El estándar es 0 1 auto, pero si lo defines con un solo número, es equivalente a 0 1.

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

Se recomienda que utilices esta propiedad shorthand en lugar de definir cada una de las propiedades por separado. Shorthand
establece los demás valores de forma inteligente.

Align-self
Permite que la alineación estándar (o lo que esté definido
por align-items) se sobrescriba para ítems individuales.
Por favor consulte la explicación de la propiedad align-
items para entender cuáles son los posibles valores.

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

¡Importante!

 CSS solo ve la jerarquía de principal-secundario; no aplicará propiedades Flex a elementos que no estén directamente
relacionados;
 Para que las propiedades funcionen en elementos secundarios, los principales deben tener propiedad display: flex;.

 Las propiedades float, clear y vertical-align no tienen ningún efecto en flex-items.