Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit Flexbox und CSS ein responsives quadratisches Raster erstellen?
Wie kann ich mit Flexbox und CSS ein responsives quadratisches Raster erstellen?
- Barbara StreisandOriginal
- 2024-11-26 04:40:08495Durchsuche
CSS-Quadratraster mit Flexbox
Höhe und Breite in Flexbox verstehen
Mit Flexbox können Sie die Breite von festlegen Elemente mithilfe der Flex-Eigenschaft. Es steuert jedoch nicht die Höhe von Elementen. Standardmäßig verteilt Flexbox die verfügbare Höhe gleichmäßig auf die Elemente.
Erstellen eines quadratischen Rasters
Um ein Raster aus Quadraten zu erstellen, müssen sowohl die Höhe als auch die Breite der Quadrate angepasst werden muss gleich sein. Gehen Sie dazu folgendermaßen vor:
- Legen Sie das Seitenverhältnis fest: Mit der CSS-Eigenschaft „aspect-ratio“ können Sie ein festes Verhältnis zwischen Breite und Höhe definieren. Stellen Sie für Quadrate das Seitenverhältnis auf 1 / 1 ein.
.flex-item {
aspect-ratio: 1 / 1;
}
Reaktionsfähiges Raster
Um ein reaktionsfähiges Raster zu erstellen, das sich automatisch an die Breite des Ansichtsfensters anpasst :
- Flex auf 1 0 automatisch setzen: Dies Ermöglicht das Anwachsen der Elemente auf die Breite, verhindert jedoch, dass sie unter ihre ursprüngliche Breite schrumpfen.
.flex-item {
flex: 1 0 auto;
}
- Containerbreite festlegen: Geben Sie einen festen Wert oder einen Prozentsatz an Breite für den übergeordneten Container, um die Gesamtbreite des Rasters zu begrenzen.
.flex-container {
width: 100%;
max-width: 800px;
}
Vollständig Code
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
</body>
.flex-container {
width: 100%;
max-width: 800px;
display: flex;
justify-content: space-around;
height: 50px;
line-height: 30px;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
flex: 1 0 auto;
aspect-ratio: 1 / 1;
}Das obige ist der detaillierte Inhalt vonWie kann ich mit Flexbox und CSS ein responsives quadratisches Raster erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!