Esnek büyüme ve genişlik arasındaki farklar nelerdir?

Question

Geçenlerde flexbox'a kullanmaya başladıktan sonra ve sıklıkla unsurları arasındaki ana eksen üzerinde yer dağıtmak için gereken durum var geliyor.

Sık sık width ve flex-grow arasında tereddüt. Ben bir öğe% 100'e kadar ekleyerek, 2 tedbirleri ve diğer 1 ölçü ölçmek istiyorsanız Örneğin, iki seçeneğim var. Ben de width: 66.6% ve width: 33.3% veya flex-grow: 2 ve flex-grow: 1 ayarlayabilirsiniz.

Bazen, öğenin geri kalan kısmını büyütmek için bir öğe istiyorsam, width: 100% veya flex-grow: 1 yapabilirim.

nasıl seçerim? Genişlik ve esnek büyümenin kullanımındaki farklılıklar/düşünceler nelerdir?

Answer 1

width ve flex-grow birbirinden tamamen farklı CSS özellikleridir.

width özelliği elemanların genişliği tanımlamak için kullanılır.

flex-grow tesiste esnek kap içinde boş alan dağıtmak için kullanılır. Bu özellik width mülkiyet gibi, bir öğeye belirli uzunluğa geçerli değildir. Sadece esnek bir öğenin, hangi boş alanın mevcut olabileceğini tüketmesine izin verir. Bir eleman alan geri kalanı büyümek istiyorsanız

Bazen width: 100% veya flex-grow: 1 yapabilirsiniz ya. Nasıl seçerim? Arka arkaya bir unsur varsa

Evet, width: 100% ve flex-grow: 1 ( padding, border ve box-sizing ayarları bağlı olarak) aynı etkiye sahip olabilir.

Ama ne var iki unsur vardır ve ikincisi kalan alanı almak istiyorsanız? Kaptaki bir kardeşle, width: 100% bir taşmaya neden olur. kardeş genişliği dinamik veya bilinmeyen ise

width: calc(100% - width of sibling); 

Ama ne: Ben böyle bir şey yapabileceğini tahmin? calc artık bir seçenek değildir.

Hızlı ve kolay çözüm, flex-grow: 1'dur.

---

iken width ve flex-grow elma-portakal, width ve flex-basis elma elmalar vardır vardır.

flex-basis özelliği, bir esnek öğenin başlangıç ​​ana boyutunu ayarlar ve width'a benzer.

• flex-grow not sizing flex items as expected

: flex-basis ve flex-grow görmek arasındaki farklar için What are the differences between flex-basis and width?