Wie kann ich mit CSS Grid und Flexbox ein responsives Quadratgitter erstellen?

CSS-Gitter mit Flexbox für reaktionsfähige Quadrate

Das Erstellen eines reaktionsfähigen Quadratgitters mit CSS Grid und Flexbox kann erreicht werden, indem die Schlüsselprinzipien verstanden und effektiv angewendet werden.

Methodik:

1. Verwenden Sie Flexbox für die horizontale Verteilung: Flexbox bietet die Flexibilität, Quadrate horizontal zu verteilen und gleichzeitig ihre Breite beizubehalten. Passen Sie die Breite der Quadrate mit Flex oder Min-Width an.
2. Quadrat-Seitenverhältnis definieren: Um sicherzustellen, dass die Elemente quadratisch sind, fügen Sie das Seitenverhältnis hinzu : 1 / 1 zum Stil der Quadrate. Diese Eigenschaft stellt sicher, dass Breite und Höhe in einem konstanten Verhältnis von 1:1 bleiben Quadrate sollten auf „Auto“ eingestellt sein. Dadurch können die Quadrate vertikal skaliert werden, ohne dass ihr Seitenverhältnis verzerrt wird.
3. Verwenden Sie Flexbox zur Größenänderung der Höhe: Da die Quadrate vertikal skaliert werden, stellen Sie möglicherweise Lücken fest zwischen ihnen. Um diese zu beseitigen, fügen Sie align-items: stretch zum übergeordneten Container hinzu und stellen Sie sicher, dass die Quadrate gestreckt werden, um den verfügbaren vertikalen Raum auszufüllen.

Code-Implementierung:
Hier ist ein überarbeitetes Codebeispiel, das diese Prinzipien berücksichtigt:

 display: flex;<p> justify-content: space-around;</p> align-content: stretch;<p>}<br>.flex-item {<br>Hintergrund: Tomate;<br>Rand: 5px;<br>Farbe: weiß;<br>Schriftstärke: fett;<br>Schriftgröße: 1,5em;<br>Textausrichtung: zentriert;<br>flex: 1 0 auto;<br>Seitenverhältnis: 1 / 1; <br>Höhe: automatisch;<br>}<br>

 <div class="flex-item">1</div><br> <div> <div class="flex-item">3</div><br> <div> <div class= "flex-item">5</div><br> <div> <div class="flex-item">7</div><br></div>

“

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS Grid und Flexbox ein responsives Quadratgitter erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!