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

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;
}

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;
}

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;
}

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;
}

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.

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

• Bir blog yayını ile CSS'deki İpuçları