Inline-block - Zwei flexible Elemente nebeneinander?

[marctrix]

Hej Matthias,

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

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 psotioniert würden.

Nur wenn nicht genügend Platz vorhanden ist. Dass der Platz immer reicht, liegt an flex-Basis: Auto; und flex-shrink: 1;

Ich verwende flex-box gerne, um meine media-queries zu reduzieren. Für das Wiki fände ich es besser, wenn das Beispiel auch auf kleinen Bildschirmen sinnvoll dargestellt wird. Eine Überschrift und ein Absatz nebeneinander sind bei 320px Viewport IMHO nicht sinnvoll.

Ich wollte aber nichts ändern, so lange ich nicht weiß, ob es nicht einen Grund für die derzeitige Darstellung gibt. Außerdem macht der Pfeil (muss der da wirklich sein?) keinen Sinn in Verbindung mit flex-wrap: wrap; - daher mein Nachfragen.

Und warum flex-basis: auto?

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

Ja, schon, aber machen Text-Boxen kleiner als 160 px überhaupt Sinn - insbesondere wenn der enthaltene Text eine Überschrift ist? Wie viele Zeichen passen denn da überhaupt noch nebeneinander? Zumal man auf kleinen Bildschirmen oft größere Schriften verwendet, um die Lesbarkeit sicherzustellen.

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 100%-Breite mit

Nein, wie groß die tatsächlichen Boxen sind, hängt von flex-shrink und flex-grow in Kombination mit flex-basis ab!

Sind bei flex-basis überhaupt Werte ohne Einheiten erlaubt?

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

für schmale Viewports.

Nicht nötig, das ist die Standard-Darstellung auf kleinen Bildschirmen, wenn man sinnvolle™ Werte für flex-basis verwendet.

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.

Die Texte von einer Überschrift und einem Absatz passen aber bei 320px nicht mehr nebeneinander - auch mit eingeschalteter Silbentrennung die zu praktisch unleserlichen Texten führen würde, weil jedes trennbare Wort mehrfach getrennt werden müsste, dürfte der Platz nicht ausreichen...

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

Das fände ich viel besser!

Marc