Jak zapobiegać zmianie rozmiaru elementu flex?

Question

Używam CSS flexbox do budowania skalowalnej, responsywnej siatki. Przy stosowaniu wykresu Google do jednego z elementów flexbox, element zmienia nieco rozmiar. Wystarczy wyrzucić siatkę z wyrównania. Przygotowałem poniższe obrazy, aby pomóc zilustrować problem.

schematu flexbox siatki przed zastosowaniem wykresu Google do punktu 6:

schematu flexbox siatki po zastosowaniu wykresu Google do punktu 6:

Do schematu flexbox ładunki grid szybciej niż Google wykres, więc siatka początkowo ładuje się poprawnie. Jednak po załadowaniu wykresu pozycja 6 lekko się rozszerza, powodując zdjęcie 2 powyżej.

środkowa kolumna elastyczny pojemnik i pozycja 6 div w CSS są ustawione w następujący sposób:

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

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

Zauważ, że pozycje 5 i 7 są ustawione w taki sam sposób w css, z flex wartości 1. To znaczy. pozycja 6 jest 3-krotnością wysokości pozycji 5 i 7. W związku z tym, po zmianie wielkości przedmiotu 6 zachowany zostaje stosunek 3: 1.

Czy jest coś, czego mi brakuje w css, aby uniemożliwić zmianę rozmiaru wykresu Google na elemencie pojemnika flexbox?

Answer 1

Kiedy mówisz flex element do flex: 3 (punkt 6) lub flex: 1 (pkt 5 & 7), oto jak to skróconą własnością załamuje:

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 

W obu przypadkach czynnikiem flex-shrink wynosi 1, co oznacza, że ​​pozycja flex może się kurczyć proporcjonalnie.

Aby zapobiec wyginanie elementów z kurczą się, co może być przyczyną ukośnego położenia, chciałbym zmienić flex-shrink 0.

Zamiast flex: 3 i flex: 1 spróbować:

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

Więcej szczegółów w schematu flexbox spec: 7.1.1. Basic Values of flex

---

Ale możesz mieć inny problem. Napisałeś:

Zauważ, że pozycje 5 i 7 są ustawione w taki sam sposób w CSS, z flex wartości 1. To znaczy. pozycja 6 jest 3-krotnością wysokości pozycji 5 i 7. W związku z tym, po zmianie wielkości przedmiotu 6 zachowany zostaje stosunek 3: 1.

Nie działa w ten sposób właściwość flex-grow.

Stosując flex-grow: 3 do elastycznego elementu mówisz go spożywać trzy razy więcej wolnego miejsca niż Flex przedmiotów z flex-grow: 1. Nie musi to oznaczać, że pozycja 6 będzie trzy razy większa niż pozycje 5 i 7.

Dowiedz się więcej o tym, jak działa flex-grow tutaj: flex-grow not sizing flex items as expected

Jako alternatywny sposób zaklejania, możesz użyć właściwości flex-basis. Wypróbuj flex: 0 0 60% na pozycji 6 i flex: 0 0 20% na elementach 5 i 7.