Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

CSS flex-wrap Özelliği

CSS flex-wrap

Css flex-wrap özelliğini kullanarak esnek kutu içerisindeki html elemanlarının kaydırılma işlemi gerçekleştirilir.

Örnek:

Bu örnekte 1'den 6'ya kadar sıralanmış kutulara flex-wrap: wrap-reverse özelliği ve değeri verildiğinde kutular hem aşağıya kaydırılacak hemde ilk üç kutu ile alttaki üç kutu sıralama olarak yer değiştirecektir.

#anakutu { width: 150px; height: 150px; border: 1px solid #c5c5c5; display: -webkit-flex; -webkit-flex-wrap: wrap-reverse; display: flex; flex-wrap: wrap-reverse; }

CSS flex-wrap nedir nasıl kullanılır

Flex-wrap özelliğini office programlarından word'teki sözcük kaydırma özelliğine benzetebilirsiniz. Bu kelimenin yanına reverse geldiğinde ise tersten bu işlemi gerçekletireceğini unutmayınız.

CSS flex-wrap CSS flex-wrap özellikleri  
Varsayılan Değer: nowrap  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript flex-wrap: object.style.flexWrap="nowrap"

CSS flex-wrap Tarayıcı Desteği

Tablodaki sayılar özelliğin ilk desteklendiği tarayıcı sürümünü göstermektedir.

CSS Kodu:
flex-wrap 29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

CSS flex-wrap Değerleri

flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;

CSS flex-wrap özelliği değerleri

CSS flex-wrap değerleri CSS flex-wrap değerleri tanımları CSS örnek uygulamalar
nowrap Aşağı yönde kaydırma yapmaz
wrap Elemanları aşağıya kaydırır.
wrap-reverse Kaydırma işlemini tersten yapar.
initial Özelliğin varsayılan değeridir.
inherit Soybağından gelen değeri alır.  

Yorumlar