CSS'de ortalama

Bir dizi teste tabi tutulurken, değişime en çok direnç gösteren yöntemi bulmak için 5 ortalama tekniğini uygulayın.

Adam Argyle

CSS'yi merkeze almak, çok kötü bir iştir. Espriler ve alaylarla dolu. 2020 CSS tamamen büyüdü ve artık bu şakalara kahkahalarla gülebiliyoruz. sıkılmış dişler.

Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:

Yarışma

Farklı merkezleme türleri vardır. Çeşitli kullanım alanlarından gerekçesini göstermek için "kazandırma" kararının ardındaki gerekçeyi merkezleme tekniğini, The Resilience Ringer'ı oluşturdu. Her merkezde uygulanan bir dizi stres testidir. dengeyi sağlamanız ve onların performanslarını gözlemlemeniz gerekir. Sonunda, en yüksek puanlama tekniğini ve "en değerli" tekniğini açığa çıkarıyorum. Yeni ortalama teknikleri ve çözümlerini öğreneceğinizi umuyoruz.

Direnç Zili

Direnişçi Zili, bir projeyi merkeze almanın strateji uluslararası düzenler, değişken boyutlu görüntü alanları, metin düzenlemeleri ve dinamik içerik. Bu ilkeler, şirket için aşağıdaki dayanıklılık testlerinin şekillendirilmesine merkezleme teknikleri:

  1. Sıkıştırılmış: ortalama işlevinin genişlik değişikliklerini işleyebilmesi gerekir
  2. Bastırıldı: merkezleme sayesinde yükseklik değişikliklerini işleyebilecek
  3. Kopya: ortalamalama, öğe sayısı için dinamik olmalıdır
  4. Düzenleme: ortalamalama, içeriğin uzunluğu ve diline göre dinamik olmalıdır.
  5. Akış: ortalamalama doküman yönü, yazma modundan bağımsız olmalıdır

Kazanan çözüm, içeriği kalıcı olarak koruyarak dayanıklılığını göstermelidir. sıkıştırılırken, sıkıştırılırken, çoğaltıldığında, düzenlenirken ve değiştirilirken ortaya dil modlarını ve yol tariflerini kullanın. Güvenilir ve dirençli bir merkez, güvenli bir merkez.

Açıklama

Bazı meta bilgileri saklamanıza yardımcı olacak bazı görsel renk ipuçları sağladım şu bağlamda:

  • Pembe kenarlık, ortalama stillerin sahipliğini gösterir
  • Gri kutu, kapsayıcıdaki ortalanmış arka plandır. öğe
  • Her çocuğun arka plan rengi beyaz olduğundan bu videoda alt kutu boyutlarına (varsa) göre ortalama

5 Yarışmacı

5 merkezleme tekniği "Resilience Ringer"a girdiğinde, yalnızca biri Dirençli Tacı 👸.

1. İçerik Merkezi

İçeriğinizi düzenlemek ve çoğaltmak VisBug
  1. Squish: Harika!
  2. Squash: Harika!
  3. Kopya: Harika!
  4. Düzenleme: Harika!
  5. Akış: Harika!

display: grid metinlerinin kısa ve öz yazımını yakalamak zor olacak. place-content kısaltmasıdır. Çocukları ortak bir paydada buluşturup meşrulaştırdığı için okunması gereken öğe grupları için sağlam bir ortalama tekniğidir.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Artıları
  • İçerik, kısıtlı alan ve taşma durumunda bile ortalanır
  • Merkezleme düzenlemeleri ve bakım işlemleri tek bir yerde
  • Boşluk, n alt öğe arasında eşit boşluğu garanti eder
  • Izgara varsayılan olarak satır oluşturur
Eksileri
  • En geniş alt öğe (max-content), diğer tüm öğeler için genişliği ayarlar. Bu, bu konuyu Gentle Flex'te daha fazla ele alacağız.

Paragraflar ve başlıklar, prototipler veya merkezi bir yerde ayarlanması gereken şeylerdir.

2. Yumuşak Esnek

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

Gentle Flex, yalnızca merkeze odaklanan daha gerçekçi bir stratejidir. Yumuşak ve yumuşak çünkü çocuk paketinin boyutları, place-content: center'ın aksine ortalama. Tüm öğeler mümkün olduğunca nazik bir şekilde üst üste dizilir, ortalanır ve yerleştirilir.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Artıları
  • Yalnızca hizalama, yön ve dağıtımı yönetir
  • Düzenlemeler ve bakımlar tek bir yerde
  • Boşluk, n alt öğe arasında eşit boşluğu garanti eder
Eksileri
  • Çoğu kod satırı

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

3. Otomatik bot

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

Kapsayıcı, hizalama stili olmadan esnek olacak şekilde ayarlanırken doğrudan alt öğeler otomatik kenar boşluklarıyla stilize edilir. Hem nostaljik hem de muhteşem bir şeyler margin: auto, öğenin tüm taraflarında çalışır.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Artıları
  • Eğlenceli püf noktaları
  • Hızlı ve kirli
Eksileri
  • Taşırken garip sonuçlar
  • Boşluk yerine dağıtıma dayalı tercih, düzenlerin çocuklarla birlikte bulunabileceği anlamına gelir. dokunulan taraf
  • "İddiada bulunmak" gözüküyor ve bu durum, değişikliğin çocuğun kutu boyutuna

Simgeleri veya sözde öğeleri ortalamak için iyidir.

4. Fluffy Merkezi

  1. Squish: kötü
  2. Squash: kötü
  3. Yinelenen: kötü
  4. Düzenleme: Harika!
  5. Akış: Harika! (mantıksal özellikleri kullandığınız sürece)

Yarışmacı "tüylü orta" açık arayla kulağa en lezzetli rakip geliyor; kullanılan bir merkezleme tekniğidir. İçinizdeki pembeyi görün kenarlık!?

.fluffy-center {
  padding: 10ch;
}
Artıları
  • İçeriği korur
  • Atomik
  • Her test gizli bir şekilde bu ortalama stratejisini içerir
  • Kelime boşluğu boşluktur
Eksileri
  • Faydalı olma hissi
  • Doğal olarak her biri aynı olduğundan, kapsayıcı ile öğeler arasında bir çakışma olur. bedenleri konusunda çok titiz davranmak

Kelime veya kelime öbeği odaklı ortalamanın yanı sıra etiketler, haplar, düğmeler, çipler ve daha fazla.

5. Pop ve Plop

  1. Squish: tamam
  2. Squash: tamam
  3. Yinelenen: kötü
  4. Düzenleme: iyi
  5. Akış: İyi

"Çarpıcı" çünkü mutlak konumlandırma, öğeyi normalin dışına çıkardığı için akışı sağlar. "Lop" Adların bir bölümünün en faydalı olduğu zamanlardan biri olduğu için: onun üzerine tırmanmak. Bu özellik, klasik ve kullanışlı bir bindirme ortalama dinamik, esnek ve dinamik bir tekniktir. Bazen projenizin plop kullanıcı arayüzü üzerinden açılıyor.

Artıları
  • Yararlı
  • Güvenilir
  • İhtiyaç duyduğunuzda paha biçilmez bir şeydir
Eksileri
  • Negatif yüzde değerlerine sahip kod
  • Kapsayıcı bloğunu zorunlu kılmak için position: relative gerekir
  • Erken ve tuhaf çizgi sonları
  • Ek çaba gerektirmeden, içeren blok başına yalnızca 1 olabilir

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

Kazanan

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

[davul çalma]

Yumuşak ve Esnek 🎉

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

Bu kimliği stil sayfalarımda bulabilirsiniz, çünkü hem makro hem de mikro düzenler. sonuçlarıma uyan, her yönüyle güvenilir bir çözüm emin olmanız gerekir. Ayrıca doğuştan gelen bir beden tutkunu olduğum için bu çözüme geri dönüyor. Doğru, çok şey yazın ama sağladığı faydalar koddan daha ağır basar.

En Değerli Oyuncu

Fluffy Merkez

.fluffy-center {
  padding: 2ch;
}

Fluffy Center, bir ortalama tekniği olarak göz ardı edilebilecek kadar küçüktür. ama bu, ortalama stratejilerimin en önemli parçalarından biri. O kadar atomik ki bazen kullandığımı unutacağım.

Sonuç

Merkezleme stratejilerinizi ne tür durumlar bozar? Diğer zorluklar ne kadar kullanıldı? Ben çeviriyi ve otomatik yükseklik anahtarı... Başka ne olabilir?

Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? Yaklaşımlarımızı çeşitlendirelim bilgi edinecek ve web'de uygulama geliştirmenin tüm yollarını öğreneceğiz. Aşağıdaki işlemler için codelab'i bu gönderiyle birlikte uygulayın: kendi ortalama örneğinizi oluşturun. Tweet gönder bana söylersiniz. Sonra, bunu Topluluk remiksleri bölümünü inceleyin.

Topluluk remiksleri