Kapsayıcı
Kapsayıcılar, içeriğinizi belirli bir cihaz veya görünüm alanında içeren, dolduran ve hizalayan temel bir v5 yapı taşıdır.
Flexbox'ta yeni misiniz veya aşina değil misiniz? Arka plan, terminoloji, yönergeler ve kod parçacıkları için CSS Püf Noktaları esnek kutu kılavuzu göz atabilirsiniz.
Nasıl çalışır?#
Kapsayıcılar, v5'teki en temel düzen öğesidir ve varsayılan ızgara sistemimizi kullanırken gereklidir. Konteyner, içeriği içlerinde tutmak, doldurmak ve (bazen) ortalamak için kullanılır. Kapsayıcılar iç içe yerleştirilebilir fakat tavsiye edilmez.
v5 iki farklı kapsayıcı ile birlikte gelir:#
container, maksimum genişlik ayarı olan konteyner..container-fluid, maksimum genişlik 100% olan konteyner.
Aşağıdaki tablo, her bir kapsayıcının maksimum genişliğinin, her bir kesme noktasında orijinal
container ve container-fluid ile nasıl karşılaştırıldığını gösterir.| <576px | Small≥524px | Medium≥768px | Large≥992px | X-Large≥1200px | XX-Large≥1400px | |
|---|---|---|---|---|---|---|
.container | 100% | 100% | 100% | 100% | 1170px | 1370px |
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Varsayılan kapsayıcı#
html
Full kapsayıcı#
html