Wie kann ich mit Flexbox und CSS ein responsives quadratisches Raster erstellen?-CSS-Tutorial-php.cn

Wie kann ich mit Flexbox und CSS ein responsives quadratisches Raster erstellen?

Barbara Streisand

Freigeben： 2024-11-26 04:40:08

Original

498 Leute haben es durchsucht

How Can I Create a Responsive Square Grid Using Flexbox and CSS?

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

.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;
}

Nach dem Login kopieren

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!