CSS flex-direction

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