CSS’de ortalama

CSS’de merkezleme, şakalar ve alaylarla dolu kötü şöhretli bir meydan okumadır. 2020 CSS büyüdü ve artık bu şakalara dişlerimizi sıkarak değil, dürüstçe gülebiliriz.

Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:

Meydan okuma #

Farklı merkezleme türleri vardır. Farklı kullanım durumlarından, merkezlenecek nesne sayısından vb. “Kazanan” bir merkezleme tekniğinin ardındaki mantığı göstermek için The Resilience Ringer’ı yarattım. Bu, her bir merkezleme stratejisinin içinizde dengelenmesi ve performanslarını gözlemlemeniz için bir dizi stres testidir. Sonunda, en yüksek puanlama tekniğinin yanı sıra “en değerli” tekniğini ortaya koyuyorum. Umarız yeni merkezleme teknikleri ve çözümleriyle uzaklaşırsınız.

Direnç Zil Sesi #

Direnç Zil Sesi, bir merkezleme stratejisinin uluslararası düzenlere, değişken boyutlu görünüm pencerelerine, metin düzenlemelerine ve dinamik içeriğe dayanıklı olması gerektiğine dair inancımın bir temsilidir. Bu ilkeler, merkezleme tekniklerinin dayanması için aşağıdaki esneklik testlerinin şekillenmesine yardımcı oldu:

1. Ezilmiş: merkezleme, genişlikteki değişiklikleri işleyebilmelidir
2. Ezilmiş: merkezleme, yükseklikteki değişiklikleri işleyebilmelidir
3. Kopyalamak: merkezleme, öğe sayısına göre dinamik olmalıdır
4. Düzenlemek: merkezleme, içeriğin uzunluğuna ve diline göre dinamik olmalıdır
5. Akış: merkezleme belge yönü ve yazma modu agnostik olmalıdır

Kazanan çözüm, sıkıştırılırken, sıkıştırılırken, çoğaltılırken, düzenlenirken ve çeşitli dil modlarına ve yönlere değiştirilirken içeriği merkezde tutarak dayanıklılığını göstermelidir. Güvenilir ve dirençli bir merkez, güvenli bir merkez.

Efsane #

Bazı meta bilgileri bağlam içinde tutmanıza yardımcı olacak bazı görsel renk ipuçları sağladım:

• Pembe kenarlık, merkezleme stillerinin sahipliğini gösterir
• Gri kutu, ortalanmış öğelere sahip olmayı amaçlayan kaptaki arka plandır.
• Merkezleme tekniğinin çocuk kutusu boyutları (varsa) üzerindeki etkilerini görebilmeniz için her çocuğun arka planı beyazdır.

5 Yarışmacı #

5 merkezleme tekniği Resilience Ringer’a giriyor, sadece biri Resilience Crown 👸 alacak.

1. İçerik Merkezi #

1. Ezmek: Harika!
2. Kabak: Harika!
3. Kopyalamak: Harika!
4. Düzenlemek: Harika!
5. Akış: Harika!

Özlülüğü yenmek zor olacak display: grid ve place-content kısa gösterim. Çocukları toplu olarak merkeze aldığı ve haklı çıkardığı için, okunması amaçlanan öğe grupları için sağlam bir merkezleme tekniğidir.

.content-center {
display: grid;
place-content: center;
gap: 1ch;
}

için harika paragraflar ve başlıklar, prototipler veya genel olarak okunaklı bir şekilde ortalanması gereken şeyleri içeren makro düzenleri.

2. Nazik Esnetme #

1. Ezmek: Harika!
2. Kabak: Harika!
3. Kopyalamak: Harika!
4. Düzenlemek: Harika!
5. Akış: Harika!

Gentle Flex, daha doğru bir merkezlemedir.sadece strateji. Yumuşak ve nazik çünkü aksine place-content: center, merkezleme sırasında hiçbir çocuk kutusu boyutu değiştirilmez. Tüm öğeler olabildiğince nazikçe istiflenir, ortalanır ve aralıklı olarak yerleştirilir.

.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}

için harika hem makro hem de mikro düzenler.

3. Otobot #

1. Ezmek: Harika
2. Kabak: Harika
3. Kopyalamak: iyi
4. Düzenlemek: Harika
5. Akış: Harika

Konteyner, hizalama stilleri olmadan esneyecek şekilde ayarlanırken, doğrudan alt öğeler otomatik kenar boşluklarıyla biçimlendirilir. Nostaljik ve harika bir şey var margin: auto elemanın her tarafında çalışır.

.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}

için harika simgeleri veya sözde öğeleri merkezleme.

4. Kabarık Merkez #

1. Ezmek: kötü
2. Kabak: kötü
3. Kopyalamak: kötü
4. Düzenlemek: Harika!
5. Akış: Harika! (mantıksal özellikleri kullandığınız sürece)

Yarışmacı “kabarık merkez” açık ara en lezzetli yarışmacımızdır ve tamamen element/çocuğun sahip olduğu tek merkezleme tekniğidir. Solo iç pembe bordürümüzü gördünüz mü?

.fluffy-center {
padding: 10ch;
}

için harika kelime veya cümle merkezli merkezleme, etiketler, haplar, düğmeler, çipler ve daha fazlası.

5. Patla ve Patla #

1. Ezmek: Tamam
2. Kabak: Tamam
3. Kopyalamak: kötü
4. Düzenlemek: iyi
5. Akış: iyi

Bu “patlar” çünkü mutlak konumlandırma elemanı normal akışın dışına çıkarır. İsimlerin “plop” kısmı, onu en yararlı bulduğum zamandan geliyor: onu diğer şeylerin üzerine koymak. İçerik boyutuna göre esnek ve dinamik olan klasik ve kullanışlı bir bindirme merkezleme tekniğidir. Bazen kullanıcı arayüzünü diğer kullanıcı arayüzünün üzerine yerleştirmeniz yeterlidir.

için harika kipler, tostlar ve mesajlar, yığınlar ve derinlik efektleri, popover’lar.

Kazanan #

Bir adada olsaydım ve sadece 1 merkezleme tekniğim olsaydı, bu…

[drum roll]

Nazik Esneklik 🎉

.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}

Hem makro hem de mikro mizanpajlar için yararlı olduğu için stil sayfalarımda her zaman bulabilirsiniz. Beklentilerime uyan sonuçlara sahip, her yönüyle güvenilir bir çözüm. Ayrıca, içsel bir boyutlandırma bağımlısı olduğum için, bu çözüme mezun olma eğilimindeyim. Doğru, yazılacak çok şey var ama sağladığı faydalar ekstra koddan daha ağır basıyor.

MVP #

kabarık merkez

.fluffy-center {
padding: 2ch;
}

Fluffy Center o kadar mikro ki, bir merkezleme tekniği olarak gözden kaçırmak kolaydır, ancak bu benim merkezleme stratejilerimin temelini oluşturur. O kadar atomik ki bazen onu kullandığımı unutuyorum.

Çözüm #

Merkezleme stratejilerinizi ne tür şeyler bozar? Direnç zil sesine başka hangi zorluklar eklenebilir? Çeviriyi ve kapta otomatik yükseklik anahtarını düşündüm… başka ne var!?

Artık nasıl yaptığımı bildiğine göre, nasıl yapardın?! Yaklaşımlarımızı çeşitlendirelim ve web üzerinde oluşturmanın tüm yollarını öğrenelim. Tıpkı bu gönderidekiler gibi kendi merkezleme örneğinizi oluşturmak için kod laboratuvarını bu gönderiyle takip edin. beni tweetle senin versiyonun ve onu ekleyeceğim Topluluk remiksleri aşağıdaki bölüm.

Topluluk remiksleri #