W jakich okolicznościach stosuje się flex-shrink do elementów flex i jak to działa?

Question

Grałem z tym ładnym CSS Flexbox demo page i rozumiem większość koncepcji, jednak nie byłem w stanie zobaczyć flex-shrink w pracy. Jakiekolwiek ustawienia tu stosuję, nie widzę różnicy na stronie.

Z spec:

< 'flex-grow'>

'flex-grow' longhand tego komponentu Ustawia i precyzuje Flex rośnie współczynnik, który określa, ile pozycja Flex rosną w stosunku do reszty elementów elastycznych w giętkim pojemniku, gdy zostanie udostępniona dodatnia wolna przestrzeń. Po pominięciu jest ustawiony na "1".

< 'flex-kurczyć'>

'flex-shrink' longhand tego składnika zbiorów i określa współczynnik Flex kurczyć, który określa ile pozycja Flex kurczyć w stosunku do reszty flex przedmiotów w elastycznym pojemniku , gdy dystrybuowana jest ujemna wolna przestrzeń. Jeśli zostanie pominięty, zostanie ustawiony na "1". Współczynnik kurczenia flex jest pomnożony przez podstawę elastyczną, gdy rozkłada się przestrzeń ujemną.

W jakich okolicznościach zostanie zastosowany flex-shrink (tj. Gdy rozkłada się przestrzeń ujemna)? Próbowałem wypróbować niestandardową stronę z ustawionymi szerokościami na elemencie flexbox i (min-) szerokościami elementów wewnątrz niej, aby spowodować przepełnienie, ale wygląda na to, że nie jest to opisany przypadek.

Czy jest już w ogóle obsługiwany?

Jako rozwiązanie, bardzo cenny będzie zestaw opcji na połączonym demo lub demonstracja na żywo podobna do JSFiddle.

Answer 1

Aby zobaczyć działanie w postaci flex-shrink, musisz mieć możliwość zmniejszenia jego kontenera.

HTML:

<div class="container"> 
    <div class="child one"> 
    Child One 
    </div> 

    <div class="child two"> 
    Child Two 
    </div> 
</div> 

CSS:

div { 
    border: 1px solid; 
} 

.container { 
    display: flex; 
} 

.child.one { 
    flex: 1 1 10em; 
    color: green; 
} 

.child.two { 
    flex: 2 2 10em; 
    color: purple; 
} 

• http://jsfiddle.net/GyXxT/ (prefiksu - Opera lub Firefox nightly build)
• http://jsfiddle.net/GyXxT/1/ (WebKit)

W tym przykładzie oba elementy potomne powinny mieć szerokość 10em. Jeśli element rodzica ma więcej niż 20em szerokości, drugie dziecko zajmie dwa razy więcej wolnego miejsca niż pierwsze dziecko, dzięki czemu będzie większe. Jeśli element rodzica ma mniej niż 20em szerokości, to drugie dziecko będzie miało dwa razy więcej zgoli niż pierwsze dziecko, dzięki czemu będzie wyglądało na mniejsze.

Obecna obsługa Flexbox: Opera (bez poprawek), Chrome (z prefiksem), IE10 (z prefiksem, ale używa nieco innych nazw/wartości właściwości). Firefox używa obecnie starej specyfikacji z 2009 r. (Prefiksowanej), ale nowa specyfikacja powinna być dostępna teraz w eksperymentalnych wersjach (niepoprawione).