Düzenler derken aklımıza genellikle sayfa düzeyinde tasarımlar geliyor. Ancak sayfadaki daha küçük bileşenlerin kendi bağımsız düzenleri olabilir.
İdeal olarak, bu bileşen seviyesindeki düzenler kendilerini otomatik olarak ayarlar. önemli bir parçası olacak. Bir bileşenin ana içerik sütununa mı, kenar çubuğuna mı yoksa her ikisine de mi yer alacağını bilmediğiniz durumlar olabilir. Bir bileşenin nereye biteceğini bilmeden, bileşenin kendini kapsayıcısına göre ayarlayabildiğinden emin olmanız gerekir.
Izgara
CSS ızgarası yalnızca sayfa düzeyinde düzenler için değildir. Ayrıca, bunların içinde bulunan bileşenlerde de işe yarar.
Bu örnekte, ::before ve ::after
sözde öğeler her ikisinde de dekoratif çizgiler oluşturur
başlığını görebilirsiniz. Başlığın kendisi bir ızgara kapsayıcısıdır. Birey
öğeler, çizgiler her zaman mevcut alanı dolduracak şekilde yerleştirilir.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
Chrome Geliştirici Araçları'nda ızgara düzenlerini nasıl inceleyeceğinizi öğrenin.
Esnek Kutu
Adından da anlaşılacağı gibi flexbox'ı kullanarak esnek olmasını sağlayabilirsiniz. Bileşeninizdeki hangi öğelerin, bir minimum veya maksimum boyuta sahip olmalı ve diğer öğelerin, sığacak şekilde buna göre hazırlar.
Bu örnekte resim, kullanılabilir alanın dörtte birini kaplar ve metnin kalan üçte üçünü kaplar. Ancak resim hiçbir zaman 200 pikselden daha büyük olmaz.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Flexbox düzenlerini nasıl inceleyeceğinizi öğrenin inceleyebilirsiniz.
Kapsayıcı sorguları
Flexbox, içeriğinizden başlayarak tasarım yapmanıza olanak tanır. Şu parametreleri belirtebilirsiniz: olması gerekir (ne kadar daralması ve ne kadar geniş olması gerektiği gibi) ve tarayıcı da nihai uygulamayı belirler.
Ancak bileşenin kendisinin bağlamı konusunda herhangi bir farkındalığı yoktur. Ancak ana içerikte mi yoksa kenar çubuğunda mı kullanıldığını bilmez. Bu durum, bileşen düzenlerini sayfa düzenlerinden daha karmaşık hale getirebilir. Bağlamsal olarak alakalı stilleri uygulayabilmek için bileşenlerinizin içinde bulundukları görüntü alanının boyutundan daha fazlasını bilmesi gerekir.
Sayfa düzenlerinde, kapsayıcının genişliğini biliyorsunuz çünkü kapsayıcı, tarayıcı görüntü alanıdır; medya sorgularının sayfa düzeyinde kapsayıcıyı etkinleştirin.
Herhangi bir kapsayıcının boyutlarını raporlamak için container sorguları.
Başlamak için hangi öğelerin kapsayıcı görevi gördüğünü tanımlayın.
main,
aside {
container-type: inline-size;
}
Bu, satır içi boyutu sorgulamak istediğiniz anlamına gelir. İngilizce dili için bu yatay eksendir. Stilleri şuna göre değiştireceksiniz: kapsayıcının genişliğidir.
Bir bileşen bu kapsayıcılardan birinin içindeyse stilleri benzer şekilde uygulayabilirsiniz nasıl uyguladığınıza da bağlıdır.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
Bir medya nesnesi 25em parametresinden daha dar bir kapsayıcının içindeyse flexbox
stil uygulanmaz. Resim ve metin dikey olarak sıralanmış.
Ancak kapsayıcı öğe 25em değerinden daha genişse resim ve metin gösterilir
yan yana gösterilir.
Kapsayıcı sorgularıyla bileşenlerin stilini bağımsız olarak belirleyebilirsiniz. Yazabilirsiniz kapsayıcı öğenin genişliğine bağlı olarak oluşan kurallar; genişliği artık önemli değil.
Sorguları birleştirme
Sayfa düzeni ve kapsayıcı sorguları için medya sorgularını kullanabilirsiniz: dahil edilir.
Burada, sayfanın genel yapısı bir main öğesi ve bir aside öğesi içermektedir.
Her iki öğenin içinde medya nesneleri vardır.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Bir medya sorgusu,mainaside
görüntü alanı 45em değerinden daha geniş.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
Medya nesneleri için kapsayıcı sorgu kuralı aynı kalır:
kapsayıcı öğe 25em değerinden genişse yalnızca yatay flexbox düzeni uygular.
Kapsayıcı sorguları, mikro düzenlerde çığır açıyor. Bileşenleriniz bağımsız, tarayıcı görüntü alanından bağımsız olabilir.
Öğrendiklerinizi sınayın
Mikro düzen bilginizi test edin.
Izgara ve flexbox mikro düzenler için kullanışlı mıdır?
Daha önce sayfa düzeyindeki makro düzenleri hakkında bilgi edinmiştiniz. Artık sürekli iyileştirmeyi savunmayı bileşen düzeyinde mikro düzenler.
Ardından, içeriklerinizi oluşturan temel yapı taşlarını inceleyecek ve nasıl duyarlı hale getirebileceğinizi anlatacağım. İlk olarak duyarlı yazı tipi.