Wie kann verhindert werden, dass Flexbox-Artikel auf unvollständigen Zeilen zentriert werden?

Wie kann verhindert werden, dass Flexbox-Artikel auf unterbrochenen Linien zentriert werden?

In Flexbox, wenn Sie einen flexiblen Behälter mit Artikeln haben, die nicht hineinpassen gleichmäßig in einer Linie innerhalb ihrer Breite, die übrigen Elemente auf dieser Linie werden zentriert. Aber was ist, wenn Sie möchten, dass die verbleibenden Elemente von links beginnen und den gleichen Abstand haben, genau wie die Elemente in vollständigen Zeilen?

Lösung: „Geister“-Elemente verwenden

Ohne JavaScript können Sie leere Elemente (sogenannte „Geister“-Elemente) erstellen, die den verbleibenden Platz in der unvollständigen Zeile füllen.

Wenn die potenzielle Spaltenlänge Ihres Containers beispielsweise 4 beträgt, benötigen Sie 3 Geisterelemente. Sie können diese am Ende Ihres HTML-Codes hinzufügen:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Aktualisiertes CSS:

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

Dadurch wird sichergestellt, dass die Ghost-Elemente denselben Platz einnehmen wie die echte Karten.

Pseudoelemente verwenden

Sie können auch CSS-Pseudoelemente verwenden, um die Anzahl der benötigten Geisterelemente zu reduzieren:

.card:empty::before {
    content: "";
    width: 300px;
    box-shadow: none;
    margin: 2rem;
}

Dies Erstellt für jede leere Karte, die ihren Platz in der unvollständigen Zeile einnimmt, ein Pseudoelement. Indem Sie 2 Ghost-Elemente durch 2 Pseudo-Elemente ersetzen, benötigen Sie nur 1 tatsächliches Ghost-Element für eine Spaltenlänge von 4.

Beispielcode:

<div class="container">
  <div class="recipe-grid">

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card"></div> <!--- Ghost element -->

  </div>
</div>

Durch die Verwendung Mit Geisterelementen oder Pseudoelementen können Sie verhindern, dass Flexbox-Elemente auf unvollständigen Zeilen zentriert werden, und sorgen für eine optisch ansprechendere Anordnung.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Flexbox-Artikel auf unvollständigen Zeilen zentriert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!