Inline-block - Zwei flexible Elemente nebeneinander?

[Christoph B.]

Hi, bei meiner letzten Frage wurde mir super geholfen, nun bin ich mit meinem Homepage Projekt eigentlich kurz vor der Fertigstellung inkl. Responsiv und habe nur noch eine kleine Frage:

Ich habe zwei div Elemente per Inline-block nebeneinander gesetzt, einmal ein Bild und rechts davon einen Text. Der Text soll sich der Displaygröße anpassen, Absätze sollen entstehen, also es flexibel sein. Sobald der Browser kleiner wird schiebt sich der Text unter das Bild und macht erst dann Absätze. Weswegen ich "white-space:nowrap" und für den Text wieder "white-space:normal" verwende, aber dann entsteht ein anderes Problem und zwar geht der Text über das Browserfenster hinaus (aber nur genauso weit wie das Bild groß ist).

|--Bild--| |-------Text-------|

Kennt jemand das Problem bzw. hat eine Lösung dafür?

Liebe Grüße

Christoph

[Felix Riesterer]

Lieber Christoph,

ich glaube, das Problem hatte ich unlängst auch.

Liebe Grüße,

Felix Riesterer.

[Matthias Scharwies]

Servus!

ich glaube, das Problem hatte ich unlängst auch.

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

Herzliche Grüße

Matthias Scharwies

[marctrix]

Hej Matthias,

Servus!

ich glaube, das Problem hatte ich unlängst auch.

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;? Und warum flex-basis: auto?

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

Marc

[1] Vorhersehbarer off-by-one-error?!?

[Gunnar Bittersmann]

@@marctrix

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

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

[1] Vorhersehbarer off-by-one-error?!?

Rekursiv.

LLAP 🖖

PS: Wenn’s eine Fußnote werden soll, müsste noch ein Doppelpunkt hin: [1]: Vorhersehbarer

[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

[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

[Matthias Apsel]

Hallo marctrix,

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

Nein.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

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

Nein.

Danke!

Hatte ich mir schon gedacht, war aber zu faul, es nachzuschlagen (Asche auf mein Haupt)...

Marc

[Tabellenkalk]

Hallo,

(Asche auf mein Haupt)...

etwa so?

Gruß
Kalk

[Christian Kruse]

Hallo Matthias,

ich glaube, das Problem hatte ich unlängst auch.

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

Es fehlen noch diverse Prefixe, damit das auch in älteren Browsern umgesetzt wird. Irgendwas in diese Richtung:

section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

section p {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex:1 1 auto;
}

Wobei ich da statt auto eher sowas wie 100% oder so notieren würde, glaube ich.

LG,
CK

[Matthias Scharwies]

Servus!

Es fehlen noch diverse Prefixe, damit das auch in älteren Browsern umgesetzt wird.

Im Wiki verzichten wir oft auf die Vendor-prefixes. Gerade bei Flexbox ist -ms-flexbox nur für den wenig verbreiteten IE10 gültig - er sieht halt dann die mobile Ansicht (wenn RWD-mobile first! berücksichtigt ist)

Die alte -webkit-box ist hoffentlich ausgestorben, siehe Warnhinweis!

`-webkit-flex gibt es für ältere Chromes, Safaris und Androids, die sich aus unerfindlichen Gründen nicht automatisch updaten. Was wäre schlimm dran, wenn ein älteres Andoid-Phone eine Webseite in einer mobilen Ansicht sehen würde (wenn RWD-mobile first! berücksichtigt ist)?

Wobei ich da statt auto eher sowas wie 100% oder so notieren würde, glaube ich.

Ich hab mal alles ausprobiert. flex-basis könnte man auch weglassen.

Herzliche Grüße

Matthias Scharwies

[Christian Kruse]

Hallo Matthias,

Servus!

Es fehlen noch diverse Prefixe, damit das auch in älteren Browsern umgesetzt wird.

Im Wiki verzichten wir oft auf die Vendor-prefixes. [...]

Das halte ich für solche Praxis-Beispiele, die einfach per Copy&Paste verbreitet werden, für einen Fehler. Der IE10 mag zwar wenig verbreitet sein, aber es gibt ihn noch; und die alten Webkits sind aktiv in Verwendung, für das Forum musste ich bestimmte Prefixes wieder einschalten (hint extra für @Gunnar Bittersmann ;-). Und der Fallback auf die Mobile-Ansicht mag hier ziehen, in anderen Situationen aber nicht.

LG,
CK

[Christoph B.]

Perfekt, danke dir :))))

[Vollzitat entfernt]

[Christoph B.]

Das Iphone macht bei der Darstellung Probleme und zwar habe ich den Code von Wiki genau übernommen, jedoch wird beim Iphone das Bild verzerrt. Im Firefox wird alles wunderbar angezeigt.

Bei Meinungen werden Firmenicons verzerrt dargestellt: www.woch-stb.de/?page=woch

Hat jemand auch ein ähnliches Problem? Sobald ich ein Div um das Bild packe klappt es, jedoch ist dann der Text über dem Bild.

[Vollzitat entfernt]