CSS3 führt ein neues Box-Modell ein – das Flex-Box-Modell, das bestimmt, wie eine Box auf andere Boxen verteilt wird und wie mit dem verfügbaren Platz umgegangen wird. Dies ähnelt XUL (der von Firefox verwendeten Benutzerinteraktionssprache), und andere Sprachen verwenden ebenfalls dasselbe Box-Modell, wie z. B. XAML und GladeXML.
Mit diesem Modell können Sie ganz einfach ein flüssiges Layout erstellen, das sich an das Browserfenster anpasst, oder ein flexibles Layout, das sich an die Schriftgröße anpasst. Die Beispiele in diesem Artikel verwenden den folgenden HTML-Code:
<Körper>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
Das traditionelle Box-Modell ordnet Boxen basierend auf dem HTML-Fluss vertikal an. Mit dem Flexbox-Modell können Sie eine bestimmte Reihenfolge festlegen und diese umkehren. Um das flexible Box-Modell zu aktivieren, setzen Sie einfach den Anzeigeattributwert der Box mit untergeordneten Boxen auf box (oder inline-box).
Anzeige: Box;
Horizontale oder vertikale Verteilung
„box-orient“ definiert die Koordinatenachsen der Verteilung: vertikal und horizontal. Diese beiden Werte legen fest, wie die Box angezeigt wird
Körper{
Anzeige: Box;
Boxorientierung: horizontal;
}
umgekehrte Verteilung
„box-direction“ kann die Reihenfolge festlegen, in der Boxen angezeigt werden. Standardmäßig müssen Sie nur die Verteilungsachse definieren – die Boxen werden mit dem HTML-Flow verteilt. Handelt es sich um eine horizontale Achse, erfolgt die Verteilung von links nach rechts; handelt es sich um eine vertikale Achse, erfolgt die Verteilung von oben nach unten. Definieren Sie den Attributwert von „box-direction“ als „reverse“, um die Reihenfolge der Boxen umzukehren.
Körper {
Anzeige: Box;
Boxorientierung: vertikal;
Kastenrichtung: umgekehrt;
}
spezifische Verteilung
Das Attribut „box-ordinal-group“ definiert die Reihenfolge, in der Boxen verteilt werden. Die Verteilungsreihenfolge kann beliebig gesteuert werden. Die Gruppen werden mit einer Nummer beginnend bei „1“ definiert und das Box-Modell verteilt diese Gruppen zuerst und alle diese Boxen befinden sich in jeder Gruppe. Die Verteilung erfolgt von klein nach groß.
Körper {
Anzeige: Box;
Boxorientierung: vertikal;
box-direction:reverse;
}
#box1 {
Box-Ordinalgruppe: 2;
}
#box2 {
Box-Ordinalgruppe: 2;
}
#box3 {
Box-Ordinalgruppe: 1;
}
