Wie kann ich mit Flexbox ein CSS-Raster aus perfekten Quadraten erstellen?

CSS-Quadratraster mit Flexbox

In Ihrem bereitgestellten Codeausschnitt haben Sie mit Flexbox ein Quadratraster erstellt. Allerdings haben sie keine quadratische Form und ändern auch ihre Höhe, wenn sich die Höhe des Ansichtsfensters ändert.

Um Ihr gewünschtes Layout zu erreichen, müssen Sie auf jedes der quadratischen Elemente eine CSS-Eigenschaft namens „aspect-ratio“ anwenden. Die Eigenschaft „aspect-ratio“ zwingt das Element dazu, ein bestimmtes Verhältnis von Breite zu Höhe beizubehalten. In Ihrem Fall möchten Sie, dass Ihre Quadrate quadratisch sind, also sollten Sie das Seitenverhältnis auf 1/1 einstellen.

So würde Ihr aktualisierter Code aussehen:

.flex-item {
  aspect-ratio: 1 / 1;
  /* Rest of your styles here */
}

Von Wenn Sie die Eigenschaft „Seitenverhältnis“ festlegen, behalten Ihre Quadrate immer eine quadratische Form bei, unabhängig von der Breite oder Höhe des Ansichtsfensters.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox ein CSS-Raster aus perfekten Quadraten erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!