Wie kann ich mit Flexbox ein vollständig responsives CSS-Raster aus Quadraten erstellen?

CSS-Quadratraster mit Flexbox

Das Ziel besteht darin, mit CSS und Flexbox ein vollständig responsives Quadratraster zu erstellen, bei dem die Quadrate perfekt skaliert und angepasst werden Breite des Ansichtsfensters, wobei unabhängig von der Höhe des Ansichtsfensters ein quadratisches Seitenverhältnis beibehalten wird.

Machen der Quadrate Quadrat

Um sicherzustellen, dass die Quadrate ihre quadratische Form behalten, nutzen wir die CSS-Eigenschaft „Seitenverhältnis“. Mit dieser Eigenschaft können wir das eigentliche Seitenverhältnis eines Elements angeben und so seine Abmessungen beibehalten. Hier ist das aktualisierte CSS:

.flex-item {
  aspect-ratio: 1 / 1;
}

Jetzt behalten die Quadrate immer ihr quadratisches Seitenverhältnis bei.

Skalieren der Quadrate

Um die Quadrate entsprechend zu skalieren, verwenden wir Flex-Eigenschaft in Flexbox. Die Flex-Eigenschaft ist für die Steuerung des Verhaltens eines Elements innerhalb seines Flex-Containers verantwortlich. So verwenden wir es:

.flex-item {
  flex: 1 0 auto;
}

• Flex: 1 bedeutet, dass jedes Quadrat gleich viel Platz im Container einnimmt.
• 0 bedeutet, dass die Quadrate wird nicht unter ihre ursprüngliche Größe schrumpfen.
• Auto bedeutet, dass die Quadrate wachsen, um die verfügbaren Quadrate auszufüllen Platz.

Horizontale Anpassung beibehalten

Selbst mit Flexbox werden die Quadrate möglicherweise in mehrere Zeilen umgebrochen, wenn das Ansichtsfenster zu schmal wird. Um dies zu verhindern, setzen wir die justify-content-Eigenschaft des Flex-Containers auf space-around. Dadurch wird sichergestellt, dass die Quadrate ohne Umbruch gleichmäßig im Container verteilt und ausgerichtet sind.

Aktualisiertes CSS für den Flex-Container:

.flex-container {
  justify-content: space-around;
}

Endergebnis

Durch Implementierung dieser Techniken können wir jetzt ein CSS-Raster aus Quadraten erstellen, das perfekt skaliert und an die Breite des Ansichtsfensters angepasst wird. Die Quadrate behalten ihr quadratisches Seitenverhältnis unabhängig von der Höhe des Ansichtsfensters bei und sorgen so für ein konsistentes und optisch ansprechendes Layout.

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