align-content:

Ana objenin içindeki diğer objeleri dikey eksen üzerinde hizalamasını yapar.

Not: Bu özelliğin etki etmesi için ana obje içindeki nesnelerin birden fazla olması gerekmektedir.

Örnek :

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

See the Pen CSS align-content: stretch ; by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

Değer	Açıklama	Örnek
stretch	Öğeler ana objenin içine sığacak şekilde sıralanır. İlk öğe en üst konuma bitişik başlar.
center	Öğeler ana objenin merkezine konumlandırılır.
flex-start	Öğeler ana objenin başında konumlandırılır. Hepsi ardı ardına sıralanır.
flex-end	Öğeler ana objenin sonunda konumlandırılır. Hepsi ardı ardına sıralanır.
space-between	Öğeler üst ve alt kısımlar öncelik olmak üzere konumlandırılır. Bu iki öğe için üst ve alt 3 öğe için üst alt ve orta kısımlara konumlandırılırlar.
space-around	Öğeler obje içerisinde eşit olarak dikey olarak ortalanırlar.

Tarayıcı Desteği

21.0 -webkit	28.0	11.0	9.0 7.0 -webkit	12.10