Düzen dediğimizde, aklımıza genellikle sayfa düzeyinde tasarımlar gelir. Ancak, sayfadaki daha küçük bileşenlerin kendi bağımsız düzenleri olabilir.
İdeal olarak, bu bileşen düzeyindeki düzenler, sayfadaki konumlarından bağımsız olarak kendilerini otomatik olarak ayarlar. Bir bileşenin ana içerik sütununa mı, kenar çubuğuna mı yoksa ikisine birden mi yerleştirileceğini bilmediğiniz durumlar olabilir. Bir bileşenin nereye gideceğini bilmeden kendisini kapsayıcıya ayarlayabileceğinden emin olmanız gerekir.
Izgara
CSS ızgarası, yalnızca sayfa düzeyinde düzenler için değildir. Bu işlem, aynı zamanda içlerindeki bileşenler için de faydalıdır.
Bu örnekte, ::before ve ::after sözde öğeler, bir başlığın her iki tarafında dekoratif çizgiler oluşturur.
Başlığın kendisi bir ızgara kapsayıcısıdır.
Ayrı öğ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.
Flexbox
Adından da anlaşılacağı gibi flexbox, bileşenlerinizi esnek hale getirmenizi sağlar. Bileşeninizdeki hangi öğelerin minimum veya maksimum boyuta sahip olması gerektiğini tanımlayabilir ve diğer öğelerin uygun şekilde sığacak şekilde esnemesine izin verebilirsiniz.
Bu örnekte resim, kullanılabilir alanın dörtte birini, metin ise kalan alanın dörtte üçünü kaplar. Ancak resim hiçbir zaman 200 pikselden büyük olmaz.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
Chrome Geliştirici Araçları'nda flexbox düzenlerini nasıl denetleyeceğinizi öğrenin.
Kapsayıcı sorguları
Flexbox, içerikten başlayarak tasarım yapmanıza olanak tanır. Öğelerinizin parametrelerini (ne kadar dar ve ne kadar geniş olacakları) belirtebilir ve tarayıcının nihai uygulamayı belirlemesini sağlayabilirsiniz.
Ancak bileşenin kendisi, bağlamı hakkında bilgi sahibi değildir. Ana içerikte mi yoksa kenar çubuğunda mı kullanıldığını anlayamaz. 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ı, tarayıcı görüntü alanı olduğundan kapsayıcının genişliğini biliyorsunuz. Medya sorguları sayfa düzeyinde kapsayıcının boyutlarını raporlar.
Herhangi bir kapsayıcının boyutlarını raporlamak için kapsayıcı sorgularını kullanın.
Başlamak için hangi öğelerin kapsayıcı olarak davranacağını tanımlayın.
main,
aside {
container-type: inline-size;
}
Bu, satır içi boyutu sorgulayabilmek istediğiniz anlamına gelir. İngilizce dilindeki dokümanlarda ise yatay eksen kullanılır. Stilleri, kapsayıcının genişliğine göre değiştireceksiniz.
Bir bileşen bu kapsayıcılardan birinin içindeyse stilleri medya sorgularına oldukça benzer bir şekilde uygulayabilirsiniz.
.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 değerinden dar olan bir kapsayıcının içindeyse flexbox stilleri uygulanmaz. Resim ve metin dikey olarak sıralanır.
Ancak kapsayıcı öğe 25em değerinden daha genişse resim ve metin yan yana görünür.
Kapsayıcı sorguları, bileşenlerin stilini bağımsız bir şekilde oluşturmanıza olanak tanır. Görüntü alanının genişliği artık önemli değil. Kapsayıcı öğenin genişliğine dayalı kurallar yazabilirsiniz.
Sorguları birleştirme
Sayfa düzeni için medya sorgularını ve sayfadaki bileşenler için kapsayıcı sorgularını kullanabilirsiniz.
Burada sayfanın genel yapısı, bir main öğesi ve bir aside öğesine sahiptir.
Her iki öğede de medya nesneleri var.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Bir medya sorgusu, görüntü alanı 45em değerinden geniş olduğunda main ve aside öğelerine ızgara düzeni uygular.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
Medya nesneleri için kapsayıcı sorgu kuralı aynı kalır: Yalnızca kapsayıcı öğe 25em değerinden genişse yatay flexbox düzeni uygulayın.
Kapsayıcı sorguları, mikro düzenler için önemli bir fark yaratır. Bileşenleriniz, tarayıcı görüntü alanından bağımsız olarak bağımsız olabilir.
Öğrendiklerinizi sınayın
Mikro düzenler hakkındaki bilginizi test edin.
Grid ve flexbox, mikro düzenler için kullanışlı olur mu?
Daha önce, sayfa düzeyinde makro düzenler hakkında bilgi edinmiştiniz. Artık bileşen düzeyinde mikro düzenler hakkında bilgi sahibisiniz. Ardından, içeriğinizin yapı taşlarını daha yakından inceleyebilirsiniz. Resimlerinizi nasıl duyarlı hale getireceğinizi öğreneceksiniz. Şimdi duyarlı tipografiyi inceleyelim.