Der blaue Balken dient als Messlatte. Vergrößere und Verkleinere das Browserfenster.
Der Flexcontainer hat eine Breite von 100%, da ihm keine Breite zugwiesen wurde. Er nimmt die Breite des Browserfensters ein.
Die 3 Flexitems haben folgende Eigenschaften:
.flex1 { flex: 3 1 200px; }
.flex2 { flex: 1 1 200px; }
.flex3 { flex: 1 2 200px; }
flex ist die Kurzschreibweise für die 3 Werte flex-grow, flex-shrink, flex-basis
flex-grow ist das Verhältnis beim Vergrößern, der erste sollte hier 3 mal so groß sein, als einer der beiden anderen.
flex-shrink ist das Verhältnis beim Verkleinern. Der dritte sollte doppelt so klein sein, als einer der beiden anderen.
flex-basis ist die gewünschte Standardgröße
Wenn das Browserfenster auf die Breite des blauen Balkens geschoben wird, hat der Flexcontainer die Breite von 600 Pixeln und die Basisgröße eines der 3 Flexitems ist 200 Pixel. Sie haben alle die gewünschte Basisgröße von 200 Pixeln.
3 x 200 = 600
Ist das Browserfenster größer, sollte flex-grow zum Tragen kommen, ist es kleiner sollte flex-shrink ausgeführt werden. Das geschieht auch, aber nicht schlagartig. Wie man beobachten kann, wird flex-grow und flex-shrink erst dann richtig dargestellt, je mehr oder weniger Platz zur Verfügung steht. Schiebt man das Fenster sehr klein, wird der dritte doppelt so klein wie einer der anderen. Schiebt man es sehr groß, wird der erste 3 mal so groß als einer der beiden anderen. flex-shrink und flex-grow nähert sich also langsam den gewünschten Werten an.