Detaillierte Erklärung des Konflikts zwischen Flex-Layout und Position: absolut/fest

Ich bin bei der Entwicklung eines Projekts schon einmal auf dieses Problem gestoßen: den Konflikt zwischen flexiblem Layout und Position: absolut/fest. Später ist mir eine Lösung eingefallen, die ich heute mit Ihnen teilen möchte:

Projektpraxis:

Jetzt möchten wir oben eine Navigationsleiste erstellen und sie mit „Fest“ oben fixieren und ihren internen Stil mit einem flexiblen Box-Layout festlegen. Dabei stellen wir jedoch fest, dass das flexible Box-Layout fehlgeschlagen ist.

Der HTML-Code lautet wie folgt:

<ul>
    <li>Über den Verein</li>
    <li>Satzung des Vereins</li>
    <li>Vereinsstruktur</li>
    <li>Downloads</li>
</ul>

Der CSS-Code lautet wie folgt:

ul {
	Position: fest;
  	Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Rand: 0 15 px;
    Hintergrund: rosa;
}
li {
    biegen: 1;
    Listenstil: keiner;
    Höhe: 100px;
    Zeilenhöhe: 100px;
    Textausrichtung: zentriert;
    Schriftgröße: 30px;
    Rand: 1px durchgezogen #fff;
}

Die Wirkung ist wie folgt:

Wir stellen fest, dass das flexible Box-Layout fehlgeschlagen ist. Wie lösen wir also dieses Problem?
Eigentlich ist es ganz einfach. Sie müssen lediglich eine weitere Box außerhalb der UL platzieren. Anschließend wird die äußere Box positioniert und die innere Box normal mithilfe von Flexbox angelegt.

Der HTML-Code nach der Änderung lautet:

<div Klasse="Navigationsbox">    
    <ul>
        <li>Über den Verein</li>
        <li>Satzung des Vereins</li>
        <li>Vereinsstruktur</li>
        <li>Downloads</li>
    </ul>
</div>

Der CSS-Code nach der Änderung lautet:

.nav-box {
    Breite: 100 %;
    Position: fest; 
}
ul {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Rand: 0 15 px;
    Hintergrund: rosa;
}
li {
    biegen: 1;
    Listenstil: keiner;
    Höhe: 100px;
    Zeilenhöhe: 100px;
    Textausrichtung: zentriert;
    Schriftgröße: 30px;
    Rand: 1px durchgezogen #fff;
}

Zu diesem Zeitpunkt haben wir festgestellt, dass das Problem gelöst wurde!

Dies ist das Ende dieses Artikels zum Konflikt zwischen Flex-Layout und Position:absolut/fest. Weitere Informationen zum Konflikt zwischen Flex und Position:absolut/fest finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!