Esnek bir öğenin yeniden boyutlandırılmasıyla içerik nasıl önlenir?

Question

Ölçeklenebilir, duyarlı bir kılavuz oluşturmak için CSS flexbox kullanıyorum. Bir Google grafiğini flexbox öğelerinden birine uyguladığınızda, öğe boyutu çok az değişir. Izgarayı hizalamadan çıkarmak yeterlidir. Sorunu açıklamak için aşağıdaki görselleri bir araya getirdim.

flexbox'a ızgara malzeme 6'ya Google grafiği uygulamadan önce:

flexbox'a ızgara malzeme 6'ya Google grafiği uygulandıktan sonra:

flexbox'a ızgara yükler Google'a daha hızlı daha Grafik, böylece ızgara aslında doğru şekilde yüklenir. Ancak grafik yüklendiğinde, öğe 6 biraz genişler ve yukarıdaki görüntü 2'ye neden olur. aşağıdaki gibi

Ortadaki sütun esnek konteyner ve madde 6 div

css kurulum şunlardır: 1 ait flex değerlerle ürün 5 ve 7 css aynı şekilde ayarlanmıştır

#middlecolumn { 
    width: 75%; 
    height: 100%; 
    display: flex; 
    flex-flow: column; 
    margin: 0.25%; 
} 

#item6_div { 
    flex: 3; 
    margin-top: 0.8vh; 
} 

Not. Yani Madde 6, 5 ve 7 nolu maddelerin yüksekliğinin 3 katıdır. Bu şekilde, madde 6 yeniden boyutlandırıldığında, 3: 1 oranı korunur.

Google grafiğinin flexbox konteyner öğesini yeniden boyutlandırmasını önlemek için css'de eksik olduğum bir şey var mı? Eğer flex: 3 (Madde 6) ya da flex: 1 (Öğeler 5 & 7) bir esnek öğe anlatınca o stenografi özelliği yıkar nasıl

Answer 1

, burada: Her iki durumda da

flex: ? = <flex-grow>, <flex-shrink>, <flex-basis> 

flex: 3 = flex-grow: 3, flex-shrink: 1, flex-basis: 0 

flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0 

, flex-shrink faktör 1'dir, flex maddesinin orantılı olarak küçülmesine izin verilir. flexbox'a içinde

flex: 3 0 0; 
flex: 1 0 0; 

Daha fazla bilgi:

dengesizliğini neden olabilecek küçülen gelen esnek öğeleri önlemek için, ben flex-shrink 0'a

yerine flex: 3 ve flex: 1 denemek değiştirecek Bir başka sorunla karşılaşabilirsiniz. Ancak, başka bir sorunla karşılaşabilirsiniz. Sen yazdı: ürün 5 ve 7 css aynı şekilde ayarlanmıştır

Not, 1 ait flex değerleriyle. Yani Madde 6, 5 ve 7 nolu maddelerin yüksekliğinin 3 katıdır. Bu şekilde, madde 6 yeniden boyutlandırıldığında, 3: 1 oranı korunur.

Bu, flex-grow özelliğinin işleyiş şekli değil.

Esnek bir öğeye flex-grow: 3 uygulayarak, flex-grow: 1 numaralı esnek öğelere göre üç kat daha fazla boş alan tüketmesini söylüyorsunuz. Bu, Madde 6'nın, Madde 5 ve 7'nin üç katı büyüklüğünde olması anlamına gelmez.flex-grow burada nasıl

hakkında daha fazla bilgi: flex-grow not sizing flex items as expected

alternatif boyutlandırma yöntemine olarak, flex-basis özelliğini kullanmak isteyebilirsiniz. Öğeler 6 ve flex: 0 0 20%'un Öğeler 5 ve 7'de flex: 0 0 60%'u deneyin.