Justify Content

Alineación en el eje horizontal.

Alineación de los elementos hijos.

Usando justify-content: flex-start


.containerJustify_Flex-Start {
    height: auto;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Alineación de los elementos hijos

Usando justify-content: flex-end


.containerJustify_Flex-End {
    height: auto;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Alineación de los elementos hijos

Usando justify-content: center


.containerJustify_Center {
    height: auto;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
Item 1
Item 2
Item 3
Item 4
Item 5

Alineación de los elementos hijos, considera las orillas, en los centros ocupa de las cajas, por eso se incrementa.

Usando justify-content: space-around


.containerJustify_Space-Around {
    height: auto;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Alineación de los elementos hijos, elimina las orillas y reparte dentro de la caja.

Usando justify-content: space between


.containerJustify_Space-Between {
    height: auto;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Alineación de los elementos hijos,

Usando justify-content: space evenly, considera los espacios iguales para las cajas, incluyendo las orillas.


.containerJustify_Space-Evenly {
    height: auto;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7