Inline-block - Zwei flexible Elemente nebeneinander?

[Matthias Scharwies]

Servus!

Ich habe das Beispiel mal ins Wiki gestellt: CSS/Anwendung_und_Praxis/variable Elemente nebeneinander

Super!

Allerdings habe ich noch eine [1] Frage: warum kein flex-wrap: wrap;?

*flex-wrap regelt ja nur, dass es einen Umbruch von flexiblen elementen gibt. Das würde heißen, dass h2 und p untereinander postioniert würden.

Und warum flex-basis: auto?

flex-basis legt fest, welche Breite das flexible Item haben soll.

Entweder teilst du den verfügbaren Raum auf mehrere Geschwisterelemente auf. z.B.

article {flex-basis: 4;}
aside {flex-basis: 1;}

Dann wird der Article 80% und die Aside-Box 20% breit.

Oder du gibst ihr eine %-Breite mit

article {flex-basis: 80%;}
aside {flex-basis: 80%;}

Achtung: dann werden die beiden Elemente auf je 50% Breite runtergerechnet! eine Anordnung untereinander erreichst du mit flex: 1 1 100%;.

Ist es nicht erwünscht, dass auf kleinen Bildschirmen alles im Viewport bleibt?

Im Viewport ist es sowieso, weil der flexible Container nie größer als 100% Breite wird.

Natürlich könnte man das Beispiel von Felix erst ab 20em nebeneinander darstellen.

Herzliche Grüße

Matthias Scharwies