> Guten Abend, Hallo Christian_85, > Hier mein bisheriges CSS für die Boxen: > .box{ > display: flex; > flex-direction: row; > flex-wrap: wrap; > position:relative; > align-items: > flex-start; > align-content:flex-start;} Code im Forum lässt sich formatieren - hier vor den Codeblock eine Zeile mit "~~~ css" eingefügt und danach eine Zeile mit "~~~". (Siehe [https://wiki.selfhtml.org/wiki/Hilfe:Forum/Bedienung#Code](https://wiki.selfhtml.org/wiki/Hilfe:Forum/Bedienung#Code) ) ~~~ css, bad .box{ display: flex; flex-direction: row; flex-wrap: wrap; position:relative; align-items: flex-start; align-content:flex-start; } ~~~ Damit die Boxen wie gewünscht angeordnet werden, muss schon das ihnen gemeinsame **Eltern-Element**, z.B. main, entsprechend formatiert werden: ~~~ css, good main { display: flex; flex-direction: row; flex-wrap: wrap; } .box{ display: flex; flex: 0 0 12rem; margin: 0.4rem; border: 2pt solid black; } ~~~ Hier angenommen, dass der HTML-Code so aussieht: ~~~ html <main> <div class="box"> ... </div> <div class="box"> ... </div> <div class="box"> ... </div> ... </main> ~~~ Die .box brauchen nur die Angabe `display: flex;` und zur Festlegung der fixen Breite die Angabe `flex: 0 0 12rem;`. Dabei ist 12rem die Basis-Breite, und die beiden Nullen schreiben vor: Weder breiter noch schmäler ist erlaubt. Die Höhen werden ohne weiteres Zutun automatisch angeglichen (jeweils an die höchste Box einer Zeile). `position`-Angaben werden bei flexbox ignoriert - weglassen. Die `align`-Werte sind default und können daher auch wegbleiben. Zum Lernen sehr zu empfehlen: [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) Viel Erfolg! ottogal Edit: Zum Ausprobieren [https://codepen.io/ottogal/pen/GRbNawE](https://codepen.io/ottogal/pen/GRbNawE) (Die Blindtexte sollten natürlich besser in <p></p> gepackt werden.)

> Guten Abend, Hallo Christian_85, > Hier mein bisheriges CSS für die Boxen: > .box{ > display: flex; > flex-direction: row; > flex-wrap: wrap; > position:relative; > align-items: > flex-start; > align-content:flex-start;} Code im Forum lässt sich formatieren - hier vor den Codeblock eine Zeile mit "~~~ css" eingefügt und danach eine Zeile mit "~~~". (Siehe [https://wiki.selfhtml.org/wiki/Hilfe:Forum/Bedienung#Code](https://wiki.selfhtml.org/wiki/Hilfe:Forum/Bedienung#Code) ) ~~~ css, bad .box{ display: flex; flex-direction: row; flex-wrap: wrap; position:relative; align-items: flex-start; align-content:flex-start; } ~~~ Damit die Boxen wie gewünscht angeordnet werden, muss schon das ihnen gemeinsame **Eltern-Element**, z.B. main, entsprechend formatiert werden: ~~~ css, good main { display: flex; flex-direction: row; flex-wrap: wrap; } .box{ display: flex; flex: 0 0 12rem; margin: 0.4rem; border: 2pt solid black; } ~~~ Hier angenommen, dass der HTML-Code so aussieht: ~~~ html <main> <div class="box"> ... </div> <div class="box"> ... </div> <div class="box"> ... </div> ... </main> ~~~ Die .box brauchen nur die Angabe `display: flex;` und zur Festlegung der fixen Breite die Angabe `flex: 0 0 12rem;`. Dabei ist 12rem die Basis-Breite, und die beiden Nullen schreiben vor: Weder breiter noch schmäler ist erlaubt. Die Höhen werden ohne weiteres Zutun automatisch angeglichen (jeweils an die höchste Box einer Zeile). `position`-Angaben werden bei flexbox ignoriert - weglassen. Die `align`-Werte sind default und können daher auch wegbleiben. Zum Lernen sehr zu empfehlen: [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) Viel Erfolg! ottogal