Align Content

Alinea todo el contenido, abarcando los hijos.
Dar medidas.

Alinea todo el contenido.

Usando align-content: flex-start


.containerAlignContent_Flex-Start {
    height: 120px;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13

Alinea todo el contenido.

Usando align-content: flex-end


.containerAlignContent_Flex-End {
    height: 120px;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13

Alinea todo el contenido.

Usando align-content: center


.containerAlignContent_Center {
    height: 120px;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13

Alinea todo el contenido.

Usando align-content: space-around


.containerAlignContent_Space-Around {
    height: 120px;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13

Alinea todo el contenido.

Usando align-content: space-between


.containerAlignContent_Space-Between {
    height: 120px;
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13