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

Bu blogdaki popüler yayınlar

HTML Resimler

HTML yorum etiketi ile öğe gizleme örneği

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML5 Canvas Oyun Yapımı Dersleri

YouTube Reklam Engelleyici

Linklerin Renklerini Değiştirme Örnek

javascript ile aciklama satiri ve haftanın gunünü bulma

Uyurken Bile Para Kazanmak İster misin