Detaillierte grafische Erklärung zur Verwendung der CSS-Eigenschaft align-content

Die meisten Front-End-Mitarbeiter sollten mit einigen der häufig verwendeten CSS-Eigenschaften vertraut sein. Lassen Sie uns heute über etwas ungewöhnliche CSS-Eigenschaften sprechen. Wissen Sie , wie man die CSS-Eigenschaft „align-content“ verwendet? Was sind die Attributwerte von align-content? Für diejenigen, die es wissen möchten, lesen Sie bitte weiter unten.

1. Definition und Verwendung des CSS-Attributs align-content

Definition: Das Attribut align-content belegt nicht alle verfügbaren Elemente auf der Querachse im flexiblen Container Platz zum Ausrichten von Gegenständen im Behälter (vertikal).

Funktion: Legt die vertikale Anordnung der Elemente in der freien Box fest.

Bedingung: Das Attribut display:flex muss für das übergeordnete Element festgelegt sein und der Zeilenumbruch muss festgelegt sein, flex-wrap:wrap, damit die Einstellung dieses Attributs wirksam wird.

Einstellung: Dieses Attribut wirkt sich auf die Elemente in seinem Container aus, also legen Sie es einfach für das übergeordnete Element fest.

Der Wert von align-content kann bei der Verwendung nach Bedarf festgelegt werden.

stretch: Gestreckt, um in den Container zu passen (Standard).
Mitte: Befindet sich in der Mitte des Containers.
Flex-Start: Befindet sich am Anfang des Containers.
Flex-Ende: Befindet sich am Ende des Containers.
Leerzeichen dazwischen: Befindet sich in einem Container mit Leerzeichen zwischen den Zeilen.
Leerzeichen: Befindet sich in einem Container mit Leerzeichen vor, zwischen und nach jeder Zeile.

Schreiben: align-content: stretch|center|flex-start|flex-end|space-between|space-around

2. Align-content-Instanzanalyse

Beschreibung: Es gibt vier kleine Divs im äußeren Div. Um den Effekt deutlich zu sehen, habe ich verschiedene Farben dafür festgelegt und dann align-content: center;
zum großen Div hinzugefügt. Das Div im Inneren kann vertikal im Container zentriert werden. Der Code lautet wie folgt:

HTML-Teil:

<div class="box">
    <div style="background-color:red;"></div>
     <div style="background-color:orange;"></div>
     <div style="background-color:yellow;"></div>
     <div style="background-color:green;"></div>
  </div>

CSS-Teil:

.box {
      width: 100px;
      height: 300px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-align-content: center;
      align-content: center;
  } 
  .box div {
      width: 100px;
      height: 50px;
  }

Rendering:

Zusammenfassung: Nach dem Festlegen von align-content: center auf das übergeordnete Element werden die darin enthaltenen Elemente vertikal im Container zentriert. Was andere Effekte betrifft, werde ich nicht demonstrieren Sie können es hier einzeln ausprobieren und sehen, ob es mit der Schlussfolgerung übereinstimmt.

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung zur Verwendung der CSS-Eigenschaft align-content. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!