So lösen Sie das Problem der Linksausrichtung der letzten Zeile im Flex-Layout „space-between“

Schauen Sie sich zuerst den Code und die Wirkung an↓

<Stil>
        .hauptsächlich {
            Umriss: 1px durchgezogen;
            Anzeige: Flex;
            Inhalt ausrichten: Abstand dazwischen;
            Flex-Wrap: Umwickeln;
        }
        .main>div {
            Breite: 100px;
            Höhe: 100px;
            Rand unten: 10px;
            Hintergrundfarbe: hellgrün;
        }
        
    </Stil>
    <Text>
        <div Klasse="Haupt">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </body> 

Man sieht, dass das letzte Div nicht in der Mitte, sondern am Ende steht.

Da wir justify-content auf space-between setzen, bedeutet das, dass beide Seiten verbunden sind

Zu diesem Zeitpunkt können wir ein Pseudoelement für das äußerste Div festlegen. Die Breite sollte mit der Breite des inneren Divs übereinstimmen.

Nur zwei Zeilen CSS reichen aus

.main:nach {
    Inhalt: "";
    Breite: 100px;
}

Betrachten Sie nun die Wirkung

Das Prinzip besteht nämlich darin, dass ihn das letzte Pseudoelement umdrängt.

Auch wenn es 9 davon gibt, spielt es keine Rolle, da die Höhe 0 ist, siehe Bild unten ↓

Dies ist das Ende dieses Artikels zur Lösung des Problems der Linksausrichtung der letzten Zeile des Flex-Layout-Abstands. Weitere Informationen zur Linksausrichtung des Flex-Layout-Abstands finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!