Bunu Flexbox kullanarak elde etmenin imkansız olduğunu anlıyorum, çünkü her satır yalnızca öğelerine uyması için gereken minimum yükseklik olabilir, ancak bu daha yeni CSS Izgarası kullanılarak elde edilebilir mi?
Açık olmak gerekirse, sadece her satır için değil, tüm satırlarda bir ızgaradaki tüm öğeler için eşit yükseklik istiyorum. Temel olarak, en yüksek "hücre" yalnızca sırasındaki hücrelerin değil, tüm hücrelerin yüksekliğini belirlemelidir.
Yanıtlar:
Hedef, ızgaradaki en yüksek hücrenin tüm satırların yüksekliğini ayarladığı eşit yükseklikteki satırlara sahip bir ızgara oluşturmaksa, işte hızlı ve basit bir çözüm:
grid-auto-rows: 1frIzgara Düzeni, bir ızgara kabında esnek uzunluklar oluşturmak için bir birim sağlar. Bu frbirimdir. Konteynırdaki boş alanı dağıtmak için tasarlanmıştır ve flex-growflexbox'taki özelliğe biraz benzer .
Bir ızgara kabındaki tüm satırları olarak ayarlarsanız 1fr, şöyle diyelim:
grid-auto-rows: 1fr;
... o zaman tüm satırlar eşit yükseklikte olacaktır.
Yarasa dışında pek bir anlam ifade etmiyor çünkü frboş alanı dağıtması gerekiyor. Ve birkaç sıra farklı yüksekliklere sahip içeriğe sahipse, alan dağıtıldığında, bazı sıralar orantılı olarak daha küçük ve daha uzun olacaktır.
Şebekenin derinliklerine gömülü olan bu küçük külçe dışında:
7.2.3. Esnek Uzunluklar:
frbirim...
Kullanılabilir alan sonsuz olduğunda (bu, ızgara kabının genişliği veya yüksekliği belirsiz olduğunda gerçekleşir), esnek boyutlu (
fr) ızgara izleri, ilgili oranlarını korurken içeriklerine göre boyutlandırılır.Her esnek boyutlu ızgara yolunun kullanılan boyutu, her esnek boyutlu ızgara yolunun
max-contentboyutu belirlenerek ve bu boyut, "varsayımsal bir1frboyut" belirlemek için ilgili esnek faktörüne bölünerek hesaplanır .Bunların maksimumu, çözümlenmiş
1fruzunluk (esnek kesir) olarak kullanılır ve bu daha sonra nihai boyutunu belirlemek için her bir ızgara yolunun esnek faktörü ile çarpılır.
Bu yüzden, eğer bunu doğru okursam, dinamik olarak boyutlandırılmış bir ızgara ile uğraşırken (örneğin, yükseklik belirsizdir), ızgara izleri (bu durumda satırlar) içeriklerine göre boyutlandırılır.
Her satırın yüksekliği en uzun ( max-content) ızgara öğesi tarafından belirlenir .
Bu satırların maksimum yüksekliği, uzunluğu olur 1fr.
Bu nasıl 1frbir ızgara kapta eşit yükseklik satırları oluşturur.
Soruda belirtildiği gibi, flexbox ile eşit yükseklikteki satırlar mümkün değildir.
Flex öğeleri aynı satırda eşit yükseklikte olabilir, ancak birden çok satırda olamaz.
Bu davranış flexbox spesifikasyonunda tanımlanmıştır:
Çok satırlı esnek bir kapta, her satırın çapraz boyutu, satırdaki esnek öğeleri içermek için gereken minimum boyuttur.
Diğer bir deyişle, satır tabanlı esnek bir konteynerde birden fazla satır olduğunda, her satırın yüksekliği ("çapraz boyut"), satırdaki esnek öğeleri içermek için gereken minimum yüksekliktir.
Kısa cevap, grid-auto-rows: 1fr;ızgara konteynırını ayarlamanın sorulan şeyi çözmesidir.
grid-auto-rowpiksel ise ve bu satır için 2 ise, bu ilk satır için 1fr boyutunun 50 piksele eşit olduğu anlamına mı gelir?