CSS Flex: Probleme beim Anordnen von <div>s

[ottogal]

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 )

.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:

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:

<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/

Viel Erfolg!

ottogal

Edit:
Zum Ausprobieren https://codepen.io/ottogal/pen/GRbNawE
(Die Blindtexte sollten natürlich besser in <p></p> gepackt werden.)