Mikro düzenler

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.

Biri geniş, diğeri dar olmak üzere iki sütunlu düzen. Medya nesneleri, geniş veya dar sütunda olmalarına bağlı olarak farklı bir şekilde yerleştirilir.

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;
}
Firefox'ta ızgara yer paylaşımı gösteren geliştirici araçları. Chrome'da ızgara yer paylaşımı gösteren geliştirici araçları.
Firefox ve Chrome gibi masaüstü tarayıcılar, ızgara çizgilerini ve tasarımınızın üzerine yerleştirilmiş alanları gösterebilen geliştirici araçlarına sahiptir.

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;
}
Firefox'ta flexbox yer paylaşımını gösteren geliştirici araçları. Chrome'da flexbox yer paylaşımını gösteren geliştirici araçları.
Firefox ve Chrome'daki geliştirici araçları, şekli görselleştirmenize yardımcı olabilir bileşenlerine göz atalım.

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.

Farklı boyutlarda iki kapsayıcı.

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.

Biri geniş, diğeri dar olmak üzere iki sütunlu düzen. 
Medya nesneleri, geniş veya dar sütunda olmalarına bağlı olarak farklı bir şekilde yerleştirilir.

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?

Yanlış
Doğru

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.