Align Item

Alineación en el eje vertical.
Se le debe asignar un height.

Alineación de los elementos hijos.

Usando align-items: center


.containerAlignItems_Center {
    background-color: blueviolet;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: 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

Alineación de los elementos hijos.

Usando align-items: flex-end


.containerAlignItems_Flex-End {
    background-color: blueviolet;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: 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

Alineación de los elementos hijos.

Usando align-items: flex-start


.containerAlignItems_Flex-Start {
    background-color: blueviolet;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: 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

Alineación de los elementos hijos, se alinean de acuerdo al texto inicial.

Usando align-items: baseline


.containerAlignItems_Flex-Baseline {
    background-color: blueviolet;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.itemAlignItems_Flex-Baseline {
    width: 70px;
    border: 1px solid black;
    background-color: cadetblue;
}

.itemAlignItems_Flex-Baseline:nth-child(4) {
    font-size: 20px;
}
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