Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen

Bei der täglichen Arbeit stoßen wir möglicherweise auf ein Layout wie dieses: Ein übergeordneter Elementrahmen (anpassende Breite wie die Browsergröße) enthält viele Schaltflächen, und dann müssen diese Schaltflächen (feste Breite) im übergeordneten Element zentriert werden und der Gesamtinhalt der Schaltflächen wird von links nach rechts angeordnet. Hier ist eine Lösung, das Beispiel sieht wie folgt aus:

Dort findet sich folgender Code:

<div Klasse="wrap">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
    <button class="btn">7</button>
</div>

Das entsprechende CSS lautet:

.wickeln {
    Rand: 2px tief schwarz;
    Rand: 0 automatisch;
    Polsterung: 10px;
    Breite: 40%;
}
.btn {
    Gliederung: keine;
    Rand: keiner;
    Breite: 180px;
    Höhe: 30px;
    Hintergrundfarbe: Kornblumenblau;
    Rand: 5px;
}

Anzeigeeffekt:

Dynamisch veränderliche Breite:

Wie man sieht, wird bei der Verkleinerung des Browserfensters die Breite des übergeordneten Elements (schwarze Box) dynamisch angepasst und seine untergeordneten Elemente werden ebenfalls dynamisch entsprechend der Breite des übergeordneten Elements angeordnet. Die Button-Gruppe ist im übergeordneten Container jedoch linksbündig ausgerichtet. Wenn wir das Ganze zentriert halten möchten, können wir Folgendes tun:

CSS Code:

.wickeln {
    Rand: 2px tief schwarz;
    Rand: 0 automatisch;
    Polsterung: 10px;
    Breite: 40%;
    Anzeige: Raster;
    Rastervorlagenspalten: Wiederholen (automatisches Ausfüllen, 200 px);
    Inhalt ausrichten: zentriert;
}
.btn {
    Gliederung: keine;
    Rand: keiner;
    Breite: 180px;
    Höhe: 30px;
    Hintergrundfarbe: Kornblumenblau;
    Rand: 5px;
}

Setzen Sie die display des übergeordneten Elements auf grid , die Rasterspaltenvorlage auf „Automatisches Ausfüllen“ und die Breite auf 200px (die Breite kann hier etwas größer sein als bei einem einzelnen Schaltflächenelement). Setzen Sie anschließend justify-content auf „ center “, um den Inhalt horizontal zu zentrieren. Die Wirkung ist wie folgt:

Dynamisch wechselnde Effekte:

Es ist ersichtlich, dass während des Breitenänderungsprozesses das Teilelement als Ganzes immer zentriert geblieben ist.

Um diesen Effekt nur mit CSS zu erzielen, habe ich nur daran gedacht, ein Raster zu verwenden. Wenn Sie andere Methoden haben, hinterlassen Sie bitte eine Nachricht und lernen Sie gemeinsam ~

Tipp: Die Kompatibilität von Grid ist derzeit nicht sehr gut. Wenn Sie ältere Browserversionen unterstützen müssen, verwenden Sie es mit Vorsicht!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.