Flexbox tiene como meta ser una forma más eficiente de crear diseños, alinear y distribuir

espacios entre ítems en un contenedor, incluso cuando las dimensiones de esos ítems son
desconocidas y/o dinámicas (en virtud de eso el término "flex").

Aprendamos los fundamentos de CSS Flexbox para la alineación y el posicionamiento, y

cómo usar sus funcionalidades correctamente.

Qué es el Flexbox
Durante mucho tiempo, las únicas herramientas disponibles para crear diseños CSS y
posicionar elementos con buena compatibilidad entre browsers eran float y position. Sin
embargo, estas herramientas tienen algunas limitaciones muy frustrantes, especialmente
cuando se trata de responsividad. Algunas tareas que consideramos básicas en un diseño,
como centrar verticalmente un elemento secundario en relación con un elemento principal
o hacer que los elementos secundarios ocupen la misma cantidad de espacio, o que las
columnas tengan el mismo tamaño independientemente de la cantidad de contenido
interno, fueron imposibles. o muy difícil de manejar con floats o position, al menos de
forma práctica y flexible. La herramienta Flexbox (de Flexible Box) fue creada para hacer
estas tareas más sencillas y funcionales: los secundarios de un elemento con Flexbox se
pueden posicionar en cualquier dirección y pueden tener dimensiones flexibles para
adaptarse.

Elementos
Flexbox es un módulo completo y no una propiedad única; algunos de ellos deben
declararse en el contenedor (el elemento principal, que llamamos de flex container),
mientras 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". A continuación, se muestra un diagrama de la especificación,
que explica la idea central detrás del diseño Flex.

Los ítems se distribuirán en el diseño siguiendo el eje principal o transversal.

  Eje principal: el eje principal de un flex container es el eje primario y a lo largo de él son
insertados los flex ítems. Precaución: El eje principal no es necesariamente horizontal;
Dependerá de la propiedad flex-direction (vea abajo).
 Main-start | main-end: los flex ítems se insertan en el contenedor empezando por el
lado start, dirigiéndose hacia el lado end.
 Tamaño principal: El ancho o alto de un flex ítem, dependiendo de la dirección del
contenedor, es el tamaño principal del ítem. La propiedad de tamaño principal de
un flex ítem puede ser tanto width como height, dependiendo de cuál esté en la
dirección principal.
 Eje transversal: El eje perpendicular al eje principal se llama eje transversal. Su
dirección depende de la dirección del eje principal.

 Cross-start | cross-end: Líneas flex se llenan con ítems y se agregan al contenedor,

comenzando desde el lado cross start del flex container hacia el lado cross end.
 Cross size: El ancho o alto de un flex ítem, dependiendo de lo que haya en la dimensión
transversal, es el cross size del ítem. La propiedad cross size puede ser el ancho o el alto
del ítem, lo que se encuentre en la transversal.

Flex container es el elemento que involucra su estructura. Tu defines que un elemento

es un Flex Container con la propiedad display y valores flex o inline-flex.

<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
 Establece el eje principal, definiendo así la dirección en la que los flex ítems están
alineados en el flex container. Flexbox es (con la excepción de un wrapping opcional)
un concepto de diseño unidireccional. Piensa en los flex ítems inicialmente posicionaids
o en líneas horizontales o en columnas verticales.

.flex-container {

flex-direction: row | row-reverse | column | column-reverse;

o 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)

o row-reverse: de la derecha a la izquierda en ltr, de la izquierda a la derecha en rtl

o column: mismo que row, pero de arriba abajo

o column-reverse: mismo que row-reverse pero de abajo hacia arriba

flex-wrap

Por estándar, los flex ítems todos intentarán encajarse en una sola línea. Con esta
propiedad puedes modificar este comportamiento y permitir que los ítems pasen a la
siguiente línea según sea necesario.
 .flex-container {

flex-wrap: nowrap | wrap | wrap-reverse;}

o nowrap (estándar): todos los flex ítems estarán en una sola línea

o wrap: los flex ítems se dividirán en múltiples líneas, de arriba abajo

o wrap-reverse: los flex ítems se dividirán en múltiples líneas de abajo hacia arriba

flex-flow
o 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
 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-container {

justify-content: flex-start | flex-end | center | space-

between | space-around | space-evenly;

o flex-start (estándar): los ítems se alinean a lo largo del borde de inicio (start) de

acuerdo con la flex-direction del contenedor.

o Flex-end: los ítems se alinean a lo largo del borde final (end) de acuerdo con la flex-
direction del contenedor.

o start: los ítems se alinean a lo largo del borde de inicio de la dirección del writing-
mode (modo de escritura).

o end: los ítems se alinean a lo largo del borde final de la dirección del writing-mode
(modo de escritura).

o left: los ítems están alineados a lo largo del borde izquierdo del contenedor, a
menos que esto no tenga sentido con el flex-direction que se está utilizando. En
este caso, se comporta como start.

o right: los ítems están alineados a lo largo del borde derecho del contenedor, a
menos que esto no tenga sentido con el flex-direction que se está utilizando. En
este caso, se comporta como start.

o center: los ítems están centrados en la línea.

o Space-between: los ítems se distribuyen uniformemente a lo largo de la línea; el

primer ítem al lado del borde inicial de la línea, el último ítem al lado del borde final
de la línea.
 o Space-around: los ítems se distribuyen en línea con el mismo espacio entre ellos.
Tenga en cuenta que visualmente el espacio puede no ser igual, ya que todos los
ítems tienen la misma cantidad de espacio en ambos lados: el primer ítem solo
tendrá una unidad de espacio a lo largo del borde del contenedor, pero dos
unidades de espacio entre él y el siguiente ítem, porque el ítem siguiente también
tiene su propio espaciamiento que se está aplicando.

o Space-evenly: los ítems se distribuyen de manera que el espacio entre dos

elementos cualesquiera en la línea (incluso entre los ítems y los bordes) 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;

o Stretch (estándar): estira los ítems para llenar el contenedor, respetando el min-

width/max-width).

o Flex-start/start/self-start: ítems se posicionan al inicio del eje transversal. La

diferencia entre ellos es sutil y se refiere a las reglas de flex-direction o writing-
mode.

o center: ítems se centran en el eje transversal.

o baseline: ítems se alinean de acuerdo con sus baselines.

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).
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;

}
 o 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.

o 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.

o center: ítems centrados en el contenedor.

o space-between: ítems distribuidos uniformemente; la primera línea al inicio del

contenedor y la última línea al final del contenedor.

o space-around: ítems distribuidos uniformemente con el mismo espaciamiento

entre cada línea.

o space-evenly: elementos distribuidos uniformemente con el mismo espaciamiento

entre ellos.

o 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.

Por estándar los flex ítems, se organizan en la pantalla en orden de código. Pero la
propiedad order controla el orden en que aparecen en el contenedor.

.flex-item {

order: <número>; */\* el valor estándar es 0 \*/*

Flex-grow
 Define la habilidad de un flex ítem de crecer, según el caso. El valor de esta propiedad
es un valor numérico sin indicación de unidad, que se utiliza para calcular la 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 espacio remanente en el

contenedor se distribuirá de 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).
.flex-item {

flex-grow: <numero>; */\* el valor default(estándar) es 0 \

*/*

La propiedad no acepta valores negativos.

flex-shrink
Establece la habilidad de un flex ítem para contraerse, según el caso. 

.flex-item {
flex-shrink: <número>; */\* el valor estándar es 0 \*/* }

La propiedad no acepta valores negativos.

flex-basis
 Establece el tamaño estándar de un elemento antes de que se distribuya el espacio
remanente del contenedor. Puede ser un largo (por ejemplo, 20%, 5rem, etc.) o una
palabra clave. La palabra clave auto significa "observe mis 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 {

flex: 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!

o CSS solo ve la jerarquía de principal-secundario; no aplicará propiedades Flex a

elementos que no estén directamente relacionados;

o Para que las propiedades funcionen en elementos secundarios, los principales

deben tener propiedad display: flex;.

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