Düzenler söz konusu olduğunda genellikle sayfa düzeyindeki tasarımları düşünürüz. Ancak sayfa içindeki 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 otomatik olarak ayarlanır. Bir bileşenin ana içerik sütununa mı, kenar çubuğuna mı yoksa her ikisine mi yerleştirileceğini bilmediğiniz durumlar olabilir. Bir bileşenin nerede sonlanacağını kesin olarak bilmeden, bileşenin kendisini kapsayıcısına göre ayarlayabildiğinden emin olmanız gerekir.
Izgara
CSS ızgarası yalnızca sayfa düzeyindeki düzenler için değildir. Ayrıca, bu bileşenlerin içinde yer alan diğer bileşenler için de iyi sonuçlar verir.
Bu örnekte, ::before ve ::after
sözde öğeleri, başlığın her iki tarafında dekoratif çizgiler oluşturur. Başlığın kendisi bir ızgara kapsayıcısıdır. Ayrı ayrı öğeler, çizgiler her zaman kullanılabilir alanı dolduracak şekilde düzenlenir.
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'ı kullanarak bileşenlerinizi esnek hale getirebilirsiniz. Bileşeninizdeki hangi öğelerin minimum veya maksimum boyuta sahip olması gerektiğini belirtebilir ve diğer öğelerin buna göre esnemesine izin verebilirsiniz.
Bu örnekte, resim mevcut alanın dörtte birini, metin ise dörtte üçünü kaplıyor. 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 esnek kutu düzenlerini nasıl inceleyeceğinizi öğrenin.
Kapsayıcı sorguları
Flexbox, içeriğe göre tasarım yapmanıza olanak tanır. Öğelerinizin parametrelerini (ne kadar dar veya geniş olmaları gerektiği) belirtebilir ve son uygulamayı tarayıcının bulmasına izin verebilirsiniz.
Ancak bileşenin kendisi bağlamının farkında değildir. Ana içerikte mi yoksa kenar çubuğunda mı kullanıldığını bilmiyor. Bu durum, bileşen düzenlerini sayfa düzenlerinden daha karmaşık hale getirebilir. Bağlamla alakalı stiller uygulayabilmek için bileşenlerinizin, içinde bulundukları görünüm alanının boyutundan daha fazla bilgiye ihtiyacı vardır.
Sayfa düzenlerinde, kapsayıcı tarayıcı görüntü alanı olduğundan kapsayıcının genişliğini bilirsiniz. Medya sorguları, sayfa düzeyindeki kapsayıcının boyutlarını bildirir.
Herhangi bir kapsayıcının boyutlarını bildirmek için kapsayıcı sorgularını kullanın.
Başlamak için hangi öğelerin kapsayıcı olarak işlev göreceğini tanımlayın.
main,
aside {
container-type: inline-size;
}
Bu, satır içi boyutu sorgulamak istediğiniz anlamına gelir. İngilizce belgelerde bu, yatay eksendir. 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ını uyguladığınız ş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 daha dar bir kapsayıcının içindeyse flexbox stilleri uygulanmaz. Resim ve metin dikey olarak sıralanır.
Ancak kapsayan öğe 25em değerinden daha genişse resim ve metin yan yana görünür.
Kapsayıcı sorgularıyla bileşenleri bağımsız olarak stilize edebilirsiniz. Kapsayan öğenin genişliğine göre kurallar yazabilirsiniz. Artık görünüm alanının genişliği önemli değildir.
Sorguları birleştirme
Sayfa düzeni için medya sorgularını, sayfa içindeki bileşenler için ise kapsayıcı sorgularını kullanabilirsiniz.
Burada sayfanın genel yapısında bir main öğesi ve bir aside öğesi var.
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>
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 kapsayan öğe 25em değerinden genişse yatay esnek kutu düzeni uygulayın.
Kapsayıcı sorguları, mikro düzenler için oyunun kurallarını değiştiren bir yeniliktir. Bileşenleriniz tarayıcı görüntü alanından bağımsız, kendi içinde tutarlı olabilir.
Bilgilerinizi sınayın
Mikro düzenlerle ilgili bilginizi test edin.
Grid ve flexbox, mikro düzenler için kullanışlı mı?
Daha önce sayfa düzeyinde makro düzenler hakkında bilgi edindiniz. Artık bileşen düzeyinde mikro düzenler hakkında bilgi sahibisiniz.
Ardından, içeriğinizin temel yapı taşlarını daha ayrıntılı bir şekilde inceleyecek ve resimlerinizi duyarlı hale getirmeyi öğreneceksiniz. İlk olarak duyarlı tipografi hakkında bilgi edineceksiniz.