Modern CSS mizanpajları, geliştiricilerin yalnızca birkaç tuşa basarak gerçekten anlamlı ve sağlam stil kuralları yazmasına olanak tanır. Yukarıdaki konuşma ve sonraki bu gönderi, bazı ciddi ağır işler yapan 10 güçlü CSS satırını inceliyor.
Bu demoları takip etmek veya kendi başınıza oynamak için yukarıdaki Glitch yerleştirmesine göz atın veya adresini ziyaret edin. 1linelayouts.glitch.me.
01. Süper Merkezli: place-items: center #
İlk ‘tek satır’ düzeni için, tüm CSS alanındaki en büyük gizemi çözelim: şeyleri merkezlemek. Düşündüğünden daha kolay olduğunu bilmeni istiyorum place-items: center.
İlk önce belirtin grid olarak display yöntemi ve ardından yazın place-items: center aynı eleman üzerinde. place-items her ikisini de ayarlamak için bir kısaltmadır align-items Ve justify-items bir kerede. ayarlayarak centerikisi birden align-items Ve justify-items ayarlandı center.
.parent {
display: grid;
place-items: center;
}
Bu, içeriğin gerçek boyutundan bağımsız olarak üst öğe içinde mükemmel bir şekilde ortalanmasını sağlar.
02. Yapısız Krep: flex: <grow> <shrink> <baseWidth> #
Sırada yapısız gözleme var! Bu, örneğin, genellikle bir resim, başlık ve ardından bir ürünün bazı özelliklerini açıklayan bir miktar metin içeren 3 öğelik bir sıraya sahip olabilen pazarlama siteleri için yaygın bir düzendir. Mobil cihazlarda, bunların güzel bir şekilde yığılmasını ve ekran boyutunu artırdıkça genişlemesini isteyeceğiz.
Bu efekt için Flexbox kullanarak, ekran yeniden boyutlandırıldığında bu öğelerin yerleşimini ayarlamak için medya sorgularına ihtiyacınız olmayacak.
bu flex kısaltmanın anlamı: flex: <flex-grow> <flex-shrink> <flex-basis>.
Bu nedenle, kutularınızın sonuna kadar dolmasını istiyorsanız, <flex-basis> boyut, daha küçük boyutlarda küçültme, ancak uzatmak herhangi bir ek alanı doldurmak için şunu yazın: flex: 0 1 <flex-basis>. Bu durumda, senin <flex-basis> dır-dir 150px yani şuna benziyor:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Eğer sen Yapmak kutuların bir sonraki satıra kaydırıldıkça uzamasını ve boşluğu doldurmasını istiyorsanız, <flex-grow> ile 1böylece şöyle görünür:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Şimdi, siz ekran boyutunu artırdıkça veya küçülttükçe, bu esnek öğeler hem küçülüyor hem de büyüyor.
Bu demo, en az en çok ızgara düzenleri için işlev. Burada yaptığımız, minimum kenar çubuğu boyutunu 150pxancak daha büyük ekranlarda, 25%. Kenar çubuğu her zaman alacak 25% ebeveyninin yatay boşluğunun o kadar 25% daha küçük olur 150px.
Bunu, aşağıdaki değere sahip grid-template-columns değeri olarak ekleyin: minmax(150px, 25%) 1fr. İlk sütundaki öğe (bu durumda kenar çubuğu) bir minmax ile ilgili 150px de 25%ve ikinci öğe ( main Buradaki bölüm) geri kalan alanı tek bir alan olarak kaplar. 1fr izlemek.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Gözleme Yığını: grid-template-rows: auto 1fr auto #
Deconstructed Pancake’den farklı olarak bu örnek, ekran boyutu değiştiğinde alt öğelerini sarmaz. Yaygın olarak anılan yapışkan altbilgibu düzen genellikle hem web siteleri hem de uygulamalar için, mobil uygulamalarda (altbilgi genellikle bir araç çubuğudur) ve web sitelerinde (tek sayfa uygulamaları genellikle bu genel düzeni kullanır) kullanılır.
Ekleme display: grid bileşen size tek bir sütun ızgarası verecektir, ancak ana alan yalnızca altında alt bilgi bulunan içerik kadar uzun olacaktır.
Altbilginin alta yapışmasını sağlamak için şunu ekleyin:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Bu, üstbilgi ve altbilgi içeriğini otomatik olarak alt öğelerinin boyutunu alacak şekilde ayarlar ve kalan alanı uygular (1fr) ana alana giderken, auto boyutlu satır, alt öğelerinin minimum içeriğinin boyutunu alacaktır, böylece bu içerik boyut olarak arttıkça satırın kendisi uyum sağlamak için büyüyecektir.
05. Klasik Kutsal Kase Düzeni: grid-template: auto 1fr auto / auto 1fr auto #
Bu klasik kutsal kase düzeni için bir üst bilgi, alt bilgi, sol kenar çubuğu, sağ kenar çubuğu ve ana içerik vardır. Önceki düzene benzer, ancak şimdi kenar çubukları var!
Tüm bu ızgarayı tek bir kod satırı kullanarak yazmak için, grid-template mülk. Bu, hem satırları hem de sütunları aynı anda ayarlamanıza olanak tanır.
Özellik ve değer çifti: grid-template: auto 1fr auto / auto 1fr auto. Birinci ve ikinci boşlukla ayrılmış listeler arasındaki eğik çizgi, satırlar ve sütunlar arasındaki boşluktur.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Üst bilgi ve alt bilginin otomatik boyutlandırılmış içeriğe sahip olduğu son örnekte olduğu gibi, burada sol ve sağ kenar çubuğu, alt öğelerinin gerçek boyutuna göre otomatik olarak boyutlandırılır. Ancak bu sefer dikey (yükseklik) yerine yatay (genişlik) boyuttadır.
06. 12 Açıklıklı Izgara: grid-template-columns: repeat(12, 1fr) #
Sırada başka bir klasik var: 12 açıklıklı ızgara. ile CSS’de hızlı bir şekilde ızgaralar yazabilirsiniz. repeat() işlev. Kullanarak: repeat(12, 1fr); ızgara şablonu sütunları için size her biri 12 sütun verir 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Artık 12 sütunlu bir iz ızgaranız var, çocuklarımızı ızgaraya yerleştirebiliriz. Bunu yapmanın bir yolu, onları ızgara çizgileri kullanarak yerleştirmek olacaktır. Örneğin, grid-column: 1 / 13 ilk satırdan son satıra (13.) kadar uzanır ve 12 sütuna yayılır. grid-column: 1 / 5; ilk dördü kaplayacaktı.
Bunu yazmanın başka bir yolu da span anahtar kelime. İle span, başlangıç çizgisini ve ardından bu başlangıç noktasından kaç sütuna yayılacağını ayarlarsınız. Bu durumda, grid-column: 1 / span 12 eşdeğer olurdu grid-column: 1 / 13Ve grid-column: 2 / span 6 eşdeğer olurdu grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Tekrar, Otomatik, MinMaks): grid-template-columns(auto-fit, minmax(<base>, 1fr)) #
Bu yedinci örnek için, otomatik olarak yerleştirilmiş ve esnek alt öğelerle duyarlı bir düzen oluşturmak için önceden öğrenmiş olduğunuz bazı kavramları birleştirin. Oldukça temiz. Burada hatırlanması gereken anahtar terimler şunlardır: repeat, auto-(fit|fill)Ve minmax()'RAM kısaltmasıyla hatırladığınız.
Hep birlikte, şuna benziyor:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Yine tekrarı kullanıyorsunuz, ancak bu sefer auto-fit açık bir sayısal değer yerine anahtar kelime. Bu, bu alt öğelerin otomatik olarak yerleştirilmesini sağlar. Bu çocuklar aynı zamanda temel minimum değere sahiptir. 150px maksimum değer ile 1fryani daha küçük ekranlarda tüm alanı kaplayacaklar 1fr genişlik ve ulaştıkça 150px her biri geniş, aynı hatta akmaya başlayacaklar.
İle auto-fit, kutular yatay boyutları 150 pikseli aştıkça geri kalan tüm alanı dolduracak şekilde uzar. Ancak, bunu olarak değiştirirseniz auto-fillminmax işlevindeki taban boyutları aşıldığında esnemezler:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Diziliş: justify-content: space-between #
Bir sonraki düzen için, burada gösterilmesi gereken ana nokta şudur: justify-content: space-betweenkalan boşluk öğeler arasında eşit olarak dağıtılacak şekilde, ilk ve son alt öğeleri sınırlayıcı kutularının kenarlarına yerleştirir. Bu kartlar için yön kullanılarak sütun olarak ayarlanan bir Flexbox görüntüleme moduna yerleştirilirler. flex-direction: column.
Bu, başlığı, açıklamayı ve resim bloğunu ana kartın içindeki dikey bir sütuna yerleştirir. Ardından, başvuru justify-content: space-between ilk (başlık) ve son (resim bloğu) öğeleri esnek kutunun kenarlarına tutturur ve bunların arasındaki açıklayıcı metin, her uç noktaya eşit aralıklarla yerleştirilir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Stilimi Sıkıştırma: clamp(<min>, <actual>, <max>) #
İşte bazı tekniklere girdiğimiz yer daha az tarayıcı desteği, ancak düzenler ve duyarlı UI tasarımı için gerçekten heyecan verici bazı etkileri vardır. Bu demoda, aşağıdaki gibi kıskaç kullanarak genişliği ayarlıyorsunuz: width: clamp(<min>, <actual>, <max>).
Bu, mutlak bir minimum ve maksimum boyutu ve gerçek bir boyutu ayarlar. Değerlerle, şöyle görünebilir:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Buradaki minimum boyut 23ch veya 23 karakter birimi ve maksimum boyut 46ch46 karakter. Karakter genişliği birimleri elemanın yazı tipi boyutuna (özellikle genişliğine) dayalıdır. 0 glif). ‘Gerçek’ boyut %50’dir ve bu öğenin ana genişliğinin %50’sini temsil eder.
ne clamp() işlevi burada yapıyor, bu öğenin %50 genişliğini korumasını sağlıyor değin %50 ya büyüktür 46ch (daha geniş görünüm pencerelerinde) veya daha küçük 23ch (daha küçük görüntü pencerelerinde). Ana boyutu genişletip küçülttüğümde, bu kartın genişliğinin sabitlenmiş maksimum noktasına kadar arttığını ve sabitlenmiş minimum noktasına düştüğünü görebilirsiniz. Daha sonra, ortalamak için ek özellikler uyguladığımız için üst öğede ortalanmış olarak kalır. Bu, metin çok geniş olmayacağından (yukarıda) daha okunaklı mizanpajlar sağlar. 46ch) veya çok ezilmiş ve dar (daha az 23ch).
Bu aynı zamanda duyarlı tipografiyi uygulamanın harika bir yoludur. Örneğin, şunu yazabilirsiniz: font-size: clamp(1.5rem, 20vw, 3rem). Bu durumda, bir başlığın yazı tipi boyutu her zaman 1.5rem Ve 3rem ama buna göre büyür ve küçülürdü 20vw gerçek değer, görünümün genişliğine sığacak şekilde.
Bu, minimum ve maksimum boyut değeriyle okunabilirliği sağlamak için harika bir tekniktir, ancak tüm modern tarayıcılarda desteklenmediğini unutmayın, bu nedenle geri dönüşleriniz olduğundan emin olun ve testinizi yapın.
10. Boyuta Saygı: aspect-ratio: <width> / <height> #
Ve son olarak, bu son düzen aracı, grubun en deneysel olanıdır. Kısa bir süre önce Chromium 84’te Chrome Canary’de tanıtıldı ve Firefox’un bunun uygulanması için aktif çabaları var, ancak şu anda herhangi bir kararlı tarayıcı sürümünde yok.
Yine de bundan bahsetmek istiyorum, çünkü bu çok sık karşılaşılan bir sorun. Ve bu sadece bir görüntünün en boy oranını korumaktır.
İle aspect-ratio özelliği, kartı yeniden boyutlandırdıkça, yeşil görsel blok bu 16 x 9 en boy oranını koruyor. En Boy Oranına Saygı Duyuyoruz aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Bu özellik olmadan 16 x 9 en boy oranını korumak için bir padding-top hile ve ona bir dolgu ver 56.25% bir üst-genişlik oranı ayarlamak için. Yakında bunun için hack’i ve yüzde hesaplama ihtiyacını önlemek için bir özelliğimiz olacak. ile bir kare yapabilirsiniz. 1 / 1 oranı, 2’ye 1 oranı ile 2 / 1ve gerçekten de bu görüntünün belirli bir boyut oranıyla ölçeklenmesi için ihtiyacınız olan her şey.
.square {
aspect-ratio: 1 / 1;
}
Bu özellik hala geliştirilmekte ve gelmekte olsa da, özellikle video ve iframe’ler söz konusu olduğunda benim de birçok kez karşılaştığım birçok geliştirici anlaşmazlığını çözdüğü için bunu bilmek iyi bir özellik.
Çözüm #
Bu yolculuğu 10 güçlü CSS satırı üzerinden takip ettiğiniz için teşekkür ederiz. Daha fazlasını öğrenmek için izleyin videonun tamamıve deneyin demolar kendin.