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

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

Javascript ile neler yapılabilir

CSS top Özelliği

HTML strong Etiketi

Kriptopara nasıl alınır ve nereden alınır?

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Javascript Oyun Yapma Dersleri HTML5+CSS3

HTML5 Canvas Oyun Yapımı Dersleri

CSS align-self özelliği