CSS -Flexbox
1
2
3
4
5
6
7
8
CSS-Flexbox-Layoutmodul
Vor dem Flexbox-Layoutmodul gab es vier Layoutmodi:
- Block für Abschnitte auf einer Webseite
- Inline, für Text
- Tabelle, für zweidimensionale Tabellendaten
- Positioned, für die explizite Position eines Elements
Das Flexible-Box-Layout-Modul erleichtert das Entwerfen einer flexiblen, responsiven Layoutstruktur ohne Verwendung von Float oder Positionierung.
Browser-Unterstützung
Die Flexbox-Eigenschaften werden in allen modernen Browsern unterstützt.
29.0 | 11.0 | 22.0 | 10 | 48 |
Flexbox-Elemente
Um mit der Verwendung des Flexbox-Modells zu beginnen, müssen Sie zunächst einen Flex-Container definieren.
1
2
3
Das obige Element stellt einen Flex-Container (der blaue Bereich) mit drei Flex-Elementen dar.
Beispiel
Ein Flex-Container mit drei Flex-Items:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
In den nächsten Kapiteln erfahren Sie mehr über Flex-Container und Flex-Items.