Sütunlar, içeriği akıtma ve dengeleme konusunda harika bir iş çıkarır. Ne yazık ki, tüm öğeler zarif bir şekilde akmıyor. Bazen öğeler sütunlar arasında sıkışır.
Neyse ki, tarayıcıya belirli öğeleri bir arada tutmasını söyleyebilirsiniz break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )Şu anda, mülkiyet evrensel değerleri kabul autove avoid.
avoidÖzelliğin parçalanmasını önlemek için çok sütunlu bir düzen içindeki bir öğe üzerinde kullanın .
Tarayıcılar arasında bazı farklılıklar olduğundan bu özelliğin sözdizimine fazladan bir göz atın.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */Özellik, sayfa sonu özelliklerinden sonra alır ve aynı değerleri paylaşır. Şimdilik Firefox kullanıyor page-break-inside.
CodePen'de Katy DeCorah'ın (@katydecorah) Kalem sütunu kırma örneğine (CSS-Püf Noktaları) bakın.
Tarayıcı Desteği
Sayfa sonu özellikleri:
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 |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Çok sütunlu düzen 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 |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |