flex-direction :

Kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler.

Not: elementin flex özelliği yoksa ,flex-direction etkili olmaz.

Örnek

.flex{
    width: 200px;
    height: 200px;
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
    background: red;
    color: white;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer	Açıklama
row	Esnek kutuları soldan sağa sıralar.
row-reverse	Esnek kutuları sağdan sola sıralar.
column	Esnek kutuları kolon olarak yukarıdan aşağı sıralar.
Column-reverse	Esnek kutuları row-reverse gibi ama alttan yukarı sıralar.
İnital
İnherit

Tarayıcı Desteği

29.0 21.0-webkit	28.0 18.0-moz	11.0 10.0-ms-	6.1-webkit	12.10