Kişi Listesi Oluşturmak İçin Bir Düzen Numarası

Faydalı Alternatif Metin Yazma

Geçenlerde şuna benzeyen bir kişi listesi için bir tasarım oluşturmam gerekiyordu:

Her biri sağda bir simge ve solda metin bulunan bir e-posta adresi ve telefon numarasından (daha fazla iletişim türü ekleme potansiyeline sahip) oluşur. Her öğenin bir bağlantı olması gerekiyordu (simge dahil). Önemli olan, eşyaların genişliğinin ölçüye göre belirlenmesiydi. En uzun öğe. Yukarıdaki resimde en uzun içeriğe sahip öğe e-posta adresi olacaktır, dolayısıyla ikinci öğenin (telefon numarası) içeriği daha kısa olsa da bununla aynı genişlikte olması gerekir.

Öğeleri varsayılan olarak esnetin veya engelleyin, üst öğe genişliğinin %100’ünü kaplar. İçeriğin uzunluğu bilinmeyebileceğinden, öğeler üzerinde bir genişliğin sabit kodlanması arzu edilen bir çözüm olmayacaktır.

Grid ile Çözmek

Bununla nasıl başa çıkacağımı tam olarak bilmiyordum, ama şunu kullanarak bir önsezim vardı. max-content CSS Grid ile çözüm sağlayabilir. Haklı olduğum ortaya çıktı. Listede aşağıdaki CSS özelliklerini ayarlarsak, her iki öğe de en uzun öğenin genişliğine göre boyutlandırılacaktır:

.contact-list {
display: grid;
grid-template-columns: minmax(0, max-content);
}

Kullanmak grid-template-columns özelliği, bu, ızgara için minimum genişliği 0 ve maksimum genişliği olan tek bir sütun ayarlar. max-content. Atıfta şartname için max-contentbu:

Sonsuz kullanılabilir alan verildiğinde belirli bir eksende bir kutunun “ideal” boyutu. Genellikle bu, kutunun içeriğine sığarken o eksende alabileceği en küçük boyuttur, yani taşmayı önlerken doldurulmamış alanı en aza indirir.

bu 0 içindeki değer minmax() işlev çok fazla önemli değil – aslında maksimum içerik boyutunun altında sabit bir değer olabilir. Liste öğelerimizin 5rem’den daha dar olmasını asla istemediğimizi biliyorsak, o değeri buraya koyabiliriz.

Alternatif çözümler

bu ipucunu paylaştım Twitter’dan faydalı olabileceğini düşündüğüm gibi. Beklediğimden çok daha büyük bir yanıt aldı, bu yüzden bu birçok insan için kullanışlı olabilir gibi görünüyor. Birkaç kişi, aynı sonucu elde edebileceğinizi belirtti. inline-block veya inline-flex. (Teşekkürler @htmlvv, @ripcorddesign ve @hack_nug!) Farklı olası çözümleri gösteren bir demo hazırladım:

Kalemi Gör İki liste öğesini en uzun olanın genişliğini almaya zorlamanın farklı yolları Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Kullanırken inline-block veya inline-flex tarayıcı, 0’a ayarlamanız gereken bir üst ve alt kenar boşluğu ekler (tabii ki istenmediği sürece). İle birlikte inline-flex ayrıca eklemeniz gerekiyor flex-direction: columnyani genel olarak bu seçenek en fazla kod satırına sahiptir:

/* Inline-block */
.contact-list--inline-block {
display: inline-block;
margin: 0;
}

/* Inline-flex */
.contact-list--inline-flex {
display: inline-flex;
flex-direction: column;
margin: 0;
}

Lehte ve aleyhte olanlar

Bu çözümlerin her ikisi de, daha iyi tarayıcı desteğinin Grid’e göre avantajına sahiptir. Ancak, Grid desteği çok iyidir, bu nedenle bunun gerçekten sorun olacağı tek yer Internet Explorer’dır. Aşamalı geliştirme bağlamında, bu, en azından benim kullanım durumum için tamamen iyi çalışıyor: Grid’i desteklemeyen tarayıcılarda, her öğe yalnızca %100 genişlikte olacaktır. O kadar zarif değil, ama mükemmel derecede işlevsel.

Diğer iki çözüm bana biraz daha sahte geliyor – daha az kasıtlı ve gerçekten özellikleri tasarlandığı gibi kullanmıyor. Ama biz her gün CSS ile bir sürü saçma sapan şey yapıyoruz, bu yüzden kesinlikle sorun değil. Grid çözümü o sırada uyguladığım çözümdü, bu yüzden buna bağlı kalacağım – ve gerekirse daha büyük bir ızgara bağlamında da çalışabileceğini bilmek kullanışlı. Ama sizin için uygun olanı seçmekten çekinmeyin!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.