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 kesin olarak bilmeden kendisini 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. Bu işlem, aynı zamanda içlerindeki bileşenler için de faydalıdır.
Bu örnekte, ::before
ve ::after
sözde öğeler, 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;
}
![Firefox'ta ızgara yer paylaşımı gösteren geliştirici araçları.](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-firefox-41cc2b52eb644.png?authuser=6&hl=tr)
![Chrome'da ızgara yer paylaşımı gösteren geliştirici araçları.](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-chrome-s-295e54e7843c5.png?authuser=6&hl=tr)
Chrome Geliştirici Araçları'nda ızgara düzenlerini nasıl inceleyeceğinizi öğrenin.
Flexbox
Adından da anlaşılacağı gibi bileşenlerinizi esnek hale getirmek için flexbox'ı kullanabilirsiniz. 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 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;
}
![Firefox'ta flexbox yer paylaşımını gösteren geliştirici araçları.](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-firefox-4f0d749fd4328.png?authuser=6&hl=tr)
![Chrome'da flexbox yer paylaşımını gösteren geliştirici araçları.](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-chrome-s-49b481f837205.png?authuser=6&hl=tr)
Chrome Geliştirici Araçları'nda flexbox düzenlerini nasıl inceleyeceğ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 sorgulamak istediğiniz anlamına gelir. İngilizce dilindeki dokümanlarda ise 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ı uygulama şeklinize 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ıyla bileşenlerin stilini ayrı ayrı belirleyebilirsiniz. Kapsayıcı öğenin genişliğine göre kural yazabilirsiniz. Görüntü alanının genişliği artık önemli değildir.
Sorguları birleştir
Sayfa düzeni için medya sorgularını ve sayfadaki bileşenler için kapsayıcı sorguları 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üzeyindeki mikro düzenleri biliyorsunuz.
Daha sonra, içeriğinizin yapı taşlarını derinlemesine inceleyip resimlerinizi nasıl duyarlı hale getireceğinizi öğreneceksiniz. Öncelikle duyarlı yazı biçimi hakkında bilgi edineceksiniz.