Auf Thema antworten 2026

JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Beitrag: <blockquote data-quote="Myhar" data-source="post: 2649048" data-attributes="member: 134786">Ganz kurze flexbox einführung:Man nehme eine row mit colszum mitmachen einfach bei zb jsfiddle.net einfügen:[HTML]<div class="row"><div class="col">asdf</div><div class="col">qwer</div><div class="col">yxcv</div></div>[/HTML]Basis-Styles damit man sieht, wie groß die boxen sind:[CODE].row{  border: 1px solid green;  height: 30px;}.col{  border: 2px solid blue;}[/CODE]Soweit so gut, jetzt kommt flexbox-magic:[CODE].row{  display:flex;  align-items:stretch; /*hier sagt man: teile mir die items auf, so dass der Platz ausgenutzt wird.*/  }.col{  flex-grow: 1; /*damit sagt man, jedes Element soll gleich viel Platz einnehmen.*/}[/CODE]Damit hat man die row gedrittelt. Mit floats ist das nicht ganz so einfach. Vor allem braucht es für flexbox kein clear oder so, alles was nach der row kommt ist automatisch in der nächsten Zeile.Egal wie groß die Auflösung ist, die Breite passt sich immer an den Bildschirm an (das gedrittelte auch)Möchte man das 2. Element nun doppelt so groß haben wie die anderen beiden, müsste man mit float die größen der einzelnen Elemente anpassen (das erste und letzte in der Größe reduzieren, das zweite vergrößern):Mit flexbox funktioniert es so:[CODE].col:nth-child(2){  flex-grow: 2; /*sagt, dass das zweite Element doppelt so groß ist wie die restlichen*/}[/CODE]Das ist natürlich nur mal eine erste Grundlage für rows mir Flexbox, tiefergehend kann man sich damit schon tagelang beschäftigen bis man sämtliche "Tricks" raus hat.Edit: Ich habe hier komplett ohne %-Angaben gearbeitet, man kann natürlich auch %-Angaben vorgeben: col{min-width: 50%} sagt, dass eine col mindestens 50% breite haben soll. Damit die Zeilen dann in die neue rutscht, muss flex-wrap: wrap; bei der row eingefügt werden.(dann rutscht jede col in eine Zeile, weil ja col-2 doppelt so breit sein soll == 100%. ) <-- es ist also nicht immer alles super-einfach, man muss leider immer noch mitdenken <img src="/styles/default/xenforo/smilies/zwinker.gif"  class="smilie" loading="lazy" alt=";)" title="Wink    ;)" data-shortname=";)" /></blockquote> Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung: Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?