CSS'de ortalama

Hangisinin değişime karşı en dayanıklı olduğunu görmek için bir dizi testten geçen 5 merkezleme tekniğini takip edin.

Adam Argyle

CSS'de öğeleri hizalama, şaka ve alay konusu olan, kötü şöhretli bir zorluktur. 2020 CSS artık büyüdü ve artık bu şakalara ağzımızdan çok değil, gerçekten gülebiliyoruz.

Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:

Yarışma

Farklı merkezleme türleri vardır. Farklı kullanım alanlarından, merkeze alınacak öğelerin sayısından vb. "Kazanan" bir merkezleme tekniğinin arkasındaki mantığı göstermek için Dayanıklılık Çalar Saati'ni oluşturdum. Bu, her bir merkezleme stratejisinin dengesini sağlaması ve performansını gözlemlemeniz için bir dizi stres testidir. Sonunda, en yüksek puanı alan tekniğin yanı sıra "en değerli" tekniği de açıklarım. Bu atölyeden yeni merkezleme teknikleri ve çözümleri edineceğinizi umuyoruz.

The Resilience Ringer

Dayanıklılık zil sesi, merkezleme stratejisinin uluslararası düzenlere, değişken boyutlarda görüntü alanlarına, metin düzenlemelerine ve dinamik içeriğe karşı dayanıklı olması gerektiğine dair inancımı temsil ediyor. Bu ilkeler, ortalama tekniklerinin kalıcı olması için aşağıdaki dayanıklılık testlerinin şekillendirilmesine yardımcı oldu:

1. Sıkıştırılmış: Ortalamaya, genişlikteki değişiklikleri işlemesi gerekir.
2. Sıkıştırılmış: Ortalamaya alma, yükseklikteki değişiklikleri karşılayabilir
3. Kopyala: Ortalamaya öğe sayısına göre dinamik olmalıdır
4. Düzenleme: İçeriğin uzunluğuna ve diline göre dinamik olarak merkezlenmelidir.
5. Akış: Ortalama, belge yönüne ve yazma moduna bağlı olmamalıdır.

Kazanan çözüm, sıkıştırılırken, daraltılırken, kopyalanırken, düzenlenirken ve çeşitli dil modlarına ve yönlere değiştirilirken içerikleri merkezde tutarak esnekliğini göstermelidir. Güvenilir ve dayanıklı bir merkez, güvenli bir merkez.

Açıklama

Bazı meta bilgilerin bağlamını korumanıza yardımcı olmak için görsel renk ipuçları sağladım:

• Pembe kenar, merkezleme stillerinin sahipliğini gösterir
• Gri kutu, öğelerin ortalanmasını sağlayan kapsayıcıdaki arka plandır.
• Her alt öğenin arka plan rengi beyazdır. Böylece, merkezleme tekniğinin alt öğe kutusu boyutları üzerindeki etkilerini (varsa) görebilirsiniz.

5 Yarışmacı

5 merkezleme tekniği Güçlü Kalma Yarışması'na katılır. Yalnızca biri Güçlü Kalma Tacı'nı 👸 kazanır.

1. İçerik Merkezi

1. Squish: Harika.
2. Squash: Harika.
3. Kopyala: Harika.
4. Düzenle: Harika.
5. Flow: Harika.

display: grid kısalığının ve place-content kısaltmasının önüne geçmek zor olacaktır. Çocukları toplu olarak ortalayıp doğruladığı için okunması amaçlanan öğe grupları için sağlam bir merkezleme tekniğidir.

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

Paragraflar ve başlıklar, prototipler veya genel olarak okunaklı bir şekilde ortalanması gereken öğeler içeren makro düzenler için idealdir.

2. Yumuşak Esnek

1. Squish: Mükemmel.
2. Squash: Harika!
3. Kopya: Harika!
4. Düzenleme: Harika!
5. Akış: Mükemmel.

Hassas esneklik, yalnızca merkezleme odaklı bir stratejidir. place-content: center'ten farklı olarak, merkezleme sırasında çocuk kutularının boyutları değiştirilmediğinden bu yöntem yumuşak ve naziktir. Tüm öğeler mümkün olduğunca nazikçe istiflenir, ortalanır ve aralarında boşluk bırakılır.

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

Hem makro hem de mikro düzenler için idealdir.

3. Autobot

1. Squish: mükemmel
2. Squash: mükemmel
3. Kopyala: iyi
4. Düzenleme: harika
5. Akış: mükemmel

Kapsayıcı, hizalama stili olmadan flex olarak ayarlanırken doğrudan alt öğeler otomatik kenar boşluklarına sahip bir stille ayarlanır. Öğenin tüm yönleriyle çalışmak, nostaljik ve harika bir deneyimdir.margin: auto

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

Simge veya sözde öğeleri merkezlemek için idealdir.

4. Kabarık Orta

1. Sıkıştırma: kötü
2. Squash: kötü
3. Kopya: kötü
4. Düzenleme: Mükemmel.
5. Akış: Mükemmel. (mantıksal özellikler kullandığınızda)

"Yumuşacık merkez" yarışmacısı, kulağa en lezzetli gelen yarışmacımız ve tamamen öğe/alt öğe sahibi olan tek merkezleme tekniğidir. Tek renkli pembe kenarlığımızı gördünüz mü?

.fluffy-center {
  padding: 10ch;
}

Kelimeye veya ifadeye odaklanan merkezleme, etiketler, haplar, düğmeler, çipler ve daha fazlası için idealdir.

5. Pop & Plop

1. Squish: Tamam
2. Squash: Tamam
3. Kopya: kötü
4. Düzenleme: iyi
5. Akış: iyi

Mutlak konumlandırma, öğeyi normal akışın dışına çıkardığı için bu "fark eder". Adların "plop" kısmı, en kullanışlı bulduğum kullanımdan geliyor: diğer öğelerin üzerine yerleştirmek. Bu, içerik boyutuna göre esnek ve dinamik olan, klasik ve kullanışlı bir bindirme ortalama tekniğidir. Bazen kullanıcı arayüzünü diğer kullanıcı arayüzünün üzerine yerleştirmeniz yeterlidir.

Kalıcı, kısa mesaj ve mesajlar, yığınlar ve derinlik efektleri, pop-up'lar için idealdir.

Kazanan

Bir adada olsaydım ve tek bir merkezleme tekniğinden yararlanabiliyor olsaydım...

[davul çalma]

Gentle Flex 🎉

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

Hem makro hem de mikro düzenler için kullanışlı olduğu için bu stil sayfasını her zaman stil sayfalarımda bulabilirsiniz. Beklentilerimi karşılayan sonuçlar veren, her yönüyle güvenilir bir çözüm. Ayrıca, boyutlandırma konusunda tutkulu olduğum için bu çözüme geçme eğilimindeyim. Çok fazla yazı yazmanız gerekeceği doğrudur ancak sağladığı avantajlar ek koddan daha ağır basar.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center o kadar mikro ki, bir ortalama tekniği olarak göz ardı edilebilecek kadar kolay bir işlem. Ancak bu, ortalama stratejilerimin en önemli unsurlarından biri. O kadar doğal ki bazen kullandığımı unutuyorum.

Sonuç

Ne tür şeyler merkezleme stratejilerinizi bozar? Dayanıklılık zil sesine başka hangi zorluklar eklenebilir? Kapsayıcıda çeviri ve otomatik yükseklik anahtarı kullanmayı düşündüm. Başka ne olabilir?

Bunu nasıl yaptığımı öğrendiğinize göre, siz ne yapardınız? Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim. Bu gönderidekilere benzer bir merkezleme örneği oluşturmak için bu gönderideki codelab'i uygulayın. Versiyonunuzu bana Twitter üzerinden gönderin. Videonuzu aşağıdaki Topluluk remiksleri bölümüne ekleyelim.

Topluluk remiksleri

• Blog yayını ile CSS Tricks