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 bu şakalara artık dişlerimizi sıkmadan, içtenlikle gülebiliyoruz.

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

Yarışma

Merkeze alma işleminin farklı 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 edindiğ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, merkezleme tekniklerinin dayanıklı 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ık:

• 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 üstüne çıkmak zor olacaktır. Alt öğeleri toplu olarak ortalayarak ve gerekçelendirerek hizaladığından, 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 Esneme

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

Nazik 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 işlem yumuşak ve nazik bir şekilde gerçekleşir. 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. Kopya: sorun yok
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

Bu "pop", mutlak konumlandırma öğeyi normal akıştan çıkardığı için gerçekleşir. 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 yer paylaşımı merkezleme tekniğidir. Bazen kullanıcı arayüzünü diğer kullanıcı arayüzünün üzerine yerleştirmeniz yeterlidir.

Modaller, pop-up'lar, mesajlar, yığınlar ve derinlik efektleri için idealdir.

Kazanan

Bir adada olsaydım ve yalnızca 1 merkezleme tekniği kullanabilseydim bu teknik…

[drum roll]

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. Beklentilerime uygun 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 bir tekniktir ki merkezleme tekniği olarak gözden kaçması kolaydır ancak merkezleme stratejilerimin temelini oluşturur. 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? Çeviri ve kapsayıcıda otomatik yükseklik anahtarı kullanmayı düşündüm. Başka ne var?

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. Sürümünüzü bana Twitter üzerinden gönderin. Videonuzu aşağıdaki Topluluk remiksleri bölümüne ekleyelim.

Topluluk remiksleri

• Blog yayını ile CSS Tricks