Inline-block - Zwei flexible Elemente nebeneinander?
bearbeitet von Matthias ScharwiesServus!
> > Ich habe das Beispiel mal ins Wiki gestellt: [CSS/Anwendung_und_Praxis/variable Elemente nebeneinander](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/variable_Elemente_nebeneinander)
>
> Super!
>
> Allerdings habe ich noch **eine** [1] Frage: warum kein `flex-wrap: wrap;`?
*[flex-wrap](https://wiki.selfhtml.org/wiki/Flex-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.
Und warum `flex-basis: auto`?
[flex-basis](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox/flex#flex-basis) legt fest, welche Breite das flexible Item haben soll.
Entweder teilst du den verfügbaren Raum auf mehrere Geschwisterelemente auf. z.B.
~~~css
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
~~~css
article {flex-basis: 100%;}
aside {flex-basis: !00%;}
~~~
Achtung: dann werden die beiden Elemente auf je 50% Breite runtergrechnet!
>
> 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
--
Es gibt viel zu tun - packen wir's an:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}
*[gewünschte Seiten](http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}
Inline-block - Zwei flexible Elemente nebeneinander?
bearbeitet von Matthias ScharwiesServus!
> > Ich habe das Beispiel mal ins Wiki gestellt: [CSS/Anwendung_und_Praxis/variable Elemente nebeneinander](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/variable_Elemente_nebeneinander)
>
> Super!
>
> Allerdings habe ich noch **eine** [1] Frage: warum kein `flex-wrap: wrap;`?
*[flex-wrap](https://wiki.selfhtml.org/wiki/Flex-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.
Und warum `flex-basis: auto`?
[flex-basis](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox/flex#flex-basis) legt fest, welche Breite das flexible Item haben soll.
Entweder teilst du den verfügbaren Raum auf mehrere Geschwisterelemente auf. z.B.
~~~css
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
~~~css
article {flex-basis: 100%;}
aside {flex-basis: !00%;}
~~~
für schmale Viewports.
>
> 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
--
Es gibt viel zu tun - packen wir's an:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}
*[gewünschte Seiten](http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}