Flexbox und "meine" Darstellung

1 Markus.w (Gast)

Hallo alle zusammen,

Auf meiner Seite https://naturalstone.ch/test/ habe ich versucht eine Darstellung von Granittischen zu realisieren. Am PC schaut das auch genauso aus wie ich es gerne haben möchte.

Aber auf dem Handy werden die beiden Texte div.tblBoxTexte{} Lyric Text und Fachtext nebeneinander dargestellt, obwohl es keinen Platz hat, anstatt untereinander.

Ebenso die drei Bilder div.tblBoxBilder{}. Die sollten am PC bei viel Platz nebeneinander sein und auf dem Handy untereinander.

Folgendes habe ich als CSS angegeben:
div.tblBoxMain{
background: #E6E6E6;
border-radius: 15px 15px 15px 15px;
border-color: DarkSlateGray;
border-width: 1px;
border-style: solid;
display: flex;
flex-direction: column;

}
div.tblBoxTexte{
background: #E6E6E6;
margin: 1em;
border-radius: 15px 15px 15px 15px;
border-color: DarkSlateGray;
border-width: 1px;
border-style: solid;
display: flex;
}

div.tblBoxBilder{
background: #E6E6E6;
margin: 1em;
border-radius: 15px 15px 15px 15px;
border-color: DarkSlateGray;
border-width: 1px;
border-style: solid;
display: flex;
}

div.tblBoxOne{
background: #F2F2F2;
margin: 1em;
padding: 1em;
box-sizing: border-box;
border-radius: 15px 15px 15px 15px;
border-color: DarkSlateGray;
border-width: 1px;
border-style: solid;
float: left;
}

Was mache ich falsch?
Vielen Dank für Tipps
Herzlichste Grüsse
Markus

2 Jörg Kruse

Du kannst mit flex-wrap angeben, ob die Flex-Items (bei geringer Breite) auf mehrere Reihen verteilt werden können:

div.tblBoxTexte {
/* ... */
display: flex;
flex-wrap: wrap;
}

Gleiches gilt für div.tblBoxBilder.

Das "float: left" für div.tblBoxOne ist übrigens überflüssig, das Nebeneinander-Anordnen wird ja schon durch die Flexbox bewerkstelligt.

3 Markus.w (Gast)

Supervielen megadank. Funktioniert wie ich mir das berechnet habe.
Snief, Wrap, habe es gelesen, aber nicht verstanden. Ok, jetzt ist es auch mir klar.

Besten Dank... und herzlichste Grüsse

Beitrag schreiben (als Gast)