flex-wrapMülkiyet Esnek Kutu Düzeni modülünün bir alt özelliktir.
Esnek öğelerin tek bir satırda zorlanıp zorlanmayacağını veya birden çok satıra akıtılabileceğini tanımlar. Birden fazla satıra ayarlanırsa, yeni çizgilerin yığıldığı yönü belirleyen çapraz ekseni de tanımlar.
Hatırlatma: Çapraz eksen, ana eksene dik olan eksendir. Yönü ana eksen yönüne bağlıdır.
Tesis flex-wrap3 farklı değeri kabul eder:
nowrap( varsayılan ): konteynerin taşmasına neden olabilecek tek satırwrap: çoklu çizgiler, yön şu şekilde tanımlanır:flex-directionwrap-reverse: çoklu çizgiler, ile tanımlanan yönün tersiflex-direction
Sözdizimi
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Demo
Aşağıdaki demoda:
- Kırmızı liste şu şekilde ayarlanmıştır:
nowrap - Sarı liste şu şekilde ayarlanmıştır:
wrap - Mavi liste şu şekilde ayarlanmıştır:
wrap-reverse
Not: flex-directionvarsayılan değere ayarlanır: row.
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Pen Flex-wrap: demosuna bakın.
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
En iyi tarayıcı desteğini elde etmek için sözdizimlerinin nasıl karıştırılacağı hakkında daha fazla bilgi için, lütfen bu makaleye (CSS Hileleri) veya bu makaleye (DevOpera) bakın.