CSS3 Flexible Box

CSS3 Flexible Box ist ein neues Layout-Modus.

Der Zweck des flexiblen Beutels Layoutmodell einzuführen, ist eine effizientere Möglichkeit zu schaffen, für einen Behälter Unterelemente, die Ausrichtung und Verteilung des leeren Raum zu arrangieren.

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Eigenschaft Versionsnummer zu unterstützen.

Unmittelbar nach Ende der Browser -webkit- Nummer oder -moz- angegebenen Präfix.

CSS3 Flexible Box Inhalt

Flexible Box aus einem elastischen Behälter (Flex-Container) und die elastischen Teilelemente (Flex Artikel) Komponenten.

Elastische Behälter durch die Anzeige-Eigenschaft ist flex oder Inline-flex wird als das elastische Behälter definiert werden.

Der elastische Behälter enthält ein oder mehrere elastische Unterelemente.

Anmerkung: der elastische Außenbehälter und das elastische Element ein Kind des Normalwiedergabe ist. Flexible Box definiert nur, wie belastbar die untergeordneten Elemente innerhalb des Layouts des elastischen Behälters.

Flexible Unterelement wird in der Regel in der elastischen Leitung Feld angezeigt. Standardmäßig ist jeder Behälter nur eine Zeile.

Im Folgenden wird das elastische Element Kindelemente in einer Zeile, von links nach rechts angezeigt werden:

Natürlich kann man die Anordnung ändern.

Wenn wir die eingestellte direction Eigenschaft auf rtl verfolgt ( von rechts nach links), die Anordnung der elastischen Teilelemente wird sich ändern, ändern Seitenlayouts auch:

flex-Richtung

flex-direction um gibt die elastische Unterelement in den übergeordneten Container.

Grammatik

flex-direction: row | row-reverse | column | column-reverse

flex-direction Werte sind:

• Reihe: seitlich von links nach rechts (links), die Standard-Anordnung.
• Reihen Rückseite: Reverse seitlich ausgerichtet (rechtsbündig, nach vorn aus der hinteren Reihe, die letzte an der Spitze.
• Säule: vertikale Anordnung.
• Spalte-Reverse: vertikale Anordnung umgekehrt, aus der hinteren Reihe nach vorn, und schließlich eine Reihe an der Spitze.

Das folgende Beispiel zeigt die row-reverse Verwendung:

Das folgende Beispiel veranschaulicht die column verwendet:

Die folgenden Beispiele zeigen die column-reverse - Einsatz:

rechtfertigen-content-Attribut

Content Ausrichtung (rechtfertigen-Gehalt) von den elastischen Eigenschaften des Applikationsbehälters, die elastischen Elemente elastische Behälter entlang der Hauptachse (Hauptachse) ausgerichtet ist.

rechtfertigen-Inhalt Syntax lautet wie folgt:

justify-content: flex-start | flex-end | center | space-between | space-around

Jede Wertanalyse:

• flex-Start:
  

  Flexible Projekt in die erste Zeile neben der Füllung. Dies ist die Standardeinstellung. Die erste Hauptstart von den äußeren Rändern des elastischen Element wird in den wichtigsten Startkanten der Linie, und die nachfolgende bündig wiederum platziert ein dehnbarer Begriff.

• flex-end:
  

  Flexible Projekt bis zum Ende der Zeile neben der Füllung. Die erste Haupt-End-Produkte von außerhalb der elastischen Fäden sind in Hauptstirnkanten der Linie, und die nachfolgende bündig wiederum platziert ein dehnbarer Begriff gebracht.

• Zentrum:
  

  Flexible Projekt zentriert neben füllen. (Wenn der freie Speicherplatz negativ ist, überläuft das Projekt auch Elastizität in beide Richtungen).

• Raum dazwischen:
  

  Flexible Projekt gleichmäßig auf die Zeile verteilt. Wenn der Raum negativ ist oder nur ein dehnbarer Begriff, der Wert entspricht dem Flex-Start. Ansonsten Haupt starten von den äußeren Rändern der ersten Reihe und einem elastischen Element Ausrichtung, während Haupt-End-Linie und Neben Marge zuletzt ein dehnbarer Begriff Ausrichtung und Verteilung der übrigen Elemente auf der elastischen Linie, angrenzend ebenso Elemente angeordnet sind.

• Raum-around:
  

  Flexible Projekt gleichmäßig auf der Linie verteilt sind, auf beiden Seiten der linken Hälfte des Raumes. Wenn der Raum negativ ist oder nur ein dehnbarer Begriff ist der Wert an der Mitte äquivalent. Andernfalls wird die Elastizität des Projekts entlang der Linienverteilung und gleichmäßig voneinander im Abstand (zum Beispiel ist 20px), während die Hälfte des Intervalls verlassen (1/2 * 20px = 10px) zwischen dem Kopf und Schwanz auf beiden Seiten und elastischer Behälter.

Renderings zeigen:

Das folgende Beispiel zeigt die flex-end - Einsatz:

Das folgende Beispiel zeigt die center Verwendung s ':

Die folgenden Beispiele veranschaulichen die space-between der Verwendung von:

Die folgenden Beispiele zeigen die space-around verwenden:

align-Eigenschaft items

align-items gesetzt oder das elastische Element auf der Seite der Box - Achse (vertikale Achse) Richtung der Ausrichtung abzurufen.

Grammatik

align-items: flex-start | flex-end | center | baseline | stretch

Jede Wertanalyse:

• flex-Start: die Grenzseite des Kastenelement elastische Achse (vertikale Achse) gegen die Startposition der Achse der Live-Seite der Startlinie Grenze.
• flex-end: elastische Begrenzungsseite des schachtelElementAchse (vertikale Achse) gegen die Ausgangsposition Seitenwellenende der Zeilengrenze zu leben.
• Mitte: das elastische Kastenelement in der Mitte der leitungsseitigen Achse (vertikale Achse) angeordnet auf. (Wenn die Größe kleiner ist als die Größe der Biegelinie des Kastenelements ist es die gleiche Länge in beide Richtungen Überlauf).
• Baseline: Kastenelemente, wie elastische innere Welle und Seitenwellenlinie die gleiche ist, der Wert von "flex-start" gleichwertig. In anderen Fällen wird der Wert in Basis Ausrichtung einbezogen werden.
• strecken: Wenn die Größe des Randfeld Attribut die Größe der Seite der Welle gibt ist "Auto", wird sein Wert auf die Einzelposten, wie die Größe der Nähe sein, aber folgen die "min / max-Breite / Höhe" Eigentum Einschränkungen.

Das folgende Beispiel zeigt stretch(默认值) die Verwendung von:

Das folgende Beispiel zeigt die flex-start - Anwendung:

Das folgende Beispiel zeigt die flex-end - Einsatz:

Das folgende Beispiel zeigt die center Verwendung s ':

Das folgende Beispiel veranschaulicht die baseline Nutzung:

flex-Wrap-Eigenschaft

flex-wrap - Attribut wird verwendet , um ein elastisches Feld untergeordnetes Element Wrapmode angeben.

Grammatik

flex-flow:  || 

Jede Wertanalyse:

• nowrap - In der Standardeinstellung ist der elastische Behälter als eine einzige Zeile.In diesem Fall kann elastisch Kind Überlaufbehälter.
• wickeln - elastischer Behälter mehrere Zeilen.Überlaufabschnitt des elastischen Kind ist in diesem Fall in eine neue Zeile platziert werden interne Zeilenumbruch auftreten Unterschlüssel
• Wrap-Reverse - Reverse - Wrap - Reihenfolge.

Das folgende Beispiel zeigt die nowrap Verwendung:

Das folgende Beispiel zeigt die wrap Verwendung:

Das folgende Beispiel zeigt die wrap-reverse - Einsatz:

align-Attribut content

align-content - Attribut wird verwendet , um das zu ändern flex-wrap - Attribut Verhalten. Ähnliche align-items , aber es ist nicht gesetzt , die Ausrichtung der elastischen Teilelemente, aber die Ausrichtung jeder Zeile gesetzt.

Grammatik

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Jede Wertanalyse:

• stretch - Standard. Jede Zeile wird strecken, um den verbleibenden Platz zu besetzen.
• flex-start - Reihen von gestapelten Kisten in die Ausgangsposition des elastischen Behälters.
• flex-end - Reihen von gestapelten Boxen zur Endposition des elastischen Behälters.
• center - Reihen von gestapelten Kisten auf die mittlere Position des elastischen Behälters.
• space-between - der flexiblen Beutelbehälter jede Reihe gleichmäßig verteilt.
• space-around - jede Zeile in der flexiblen Beutelbehälter zu gleichen Teilen zwischen den beiden Enden verteilt die Hälfte der Unterelemente zu erhalten und Unterelemente Abstand Größe.

Das folgende Beispiel zeigt die center Verwendung s ':

Flexible Unterelement Attribute

Sequenz

Grammatik

order: 

Jede Wertanalyse:

• <Integer>: ein Integer-Wert verwendet, um die Reihenfolge, in der der kleine Wert der Oberfläche zu definieren. Es kann negativ sein.

order Eigenschaften innerhalb der elastischen Eigenschaften des elastischen Behälters untergeordneten Elemente zu setzen:

ausrichten

Einstellungen "Rand" ist "auto" Wert, automatisch den elastischen Behälter in den verbleibenden Raum erhalten. So stellen Sie den vertikalen Randwert von "auto", ermöglicht es, die elastischen Teilelemente vollständig auf der Zwei-Achsen ausgerichtet sind Richtung des elastischen Behälters.

Die folgenden Beispiele sind auf dem ersten Teil elastisches Element gesetzt margin-right: auto; . Der verbleibende Speicherplatz wird in die richtigen Elemente platziert werden:

Perfekte Zentrum

Die folgenden Beispiele sollen die perfekte Lösung für die Probleme sein, die wir in der Regel Mitte begegnen.

Elastische Feld wird Mitte sehr einfach, nur festlegen möchten die margin: auto; können die elastischen Teilelemente in axialer Richtung machen an zwei perfekt zentriert:

Ausrichten-Selbst

align-self - Attribut wird verwendet , um die Richtung der Ausrichtung des elastischen Elements einzustellen sich auf der Seite der Achse (vertikale Achse).

Grammatik

align-self: auto | flex-start | flex-end | center | baseline | stretch

Jede Wertanalyse:

• Auto: Wenn die 'align-Selbst' Wert 'auto', der berechnete Wert des Parent-Elements des Elements 'align-Wert der Einzelteile, wenn es kein Elternteil hat, den berechneten Wert des "Stretch".
• flex-Start: die Grenzseite des Kastenelement elastische Achse (vertikale Achse) gegen die Startposition der Achse der Live-Seite der Startlinie Grenze.
• flex-end: elastische Begrenzungsseite des schachtelElementAchse (vertikale Achse) gegen die Ausgangsposition Seitenwellenende der Zeilengrenze zu leben.
• Mitte: das elastische Kastenelement in der Mitte der leitungsseitigen Achse (vertikale Achse) angeordnet auf. (Wenn die Größe kleiner ist als die Größe der Biegelinie des Kastenelements ist es die gleiche Länge in beide Richtungen Überlauf).
• Baseline: Kastenelemente, wie elastische innere Welle und Seitenwellenlinie die gleiche ist, der Wert von "flex-start" gleichwertig. In anderen Fällen wird der Wert in Basis Ausrichtung einbezogen werden.
• strecken: Wenn die Größe des Randfeld Attribut die Größe der Seite der Welle gibt ist "Auto", wird sein Wert auf die Einzelposten, wie die Größe der Nähe sein, aber folgen die "min / max-Breite / Höhe" Eigentum Einschränkungen.

Das folgende Beispiel zeigt die elastischen Teilelemente ausrichten Selbst Anwendung Wirkung verschiedener Werte:

biegen

flex Attribut wird verwendet , um festzulegen , wie Raum für die elastischen Teilelemente zuzuordnen.

Grammatik

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Jede Wertanalyse:

• none: keine berechnen Schlüsselwort lautet: 0 0 Auto
• [Flex-wachsen]: Definition des elastischen Expansionsverhältnis Element-Box.
• [Flex-schrumpfen]: Definition des elastischen Schrumpfungsverhältnis Element-Box.
• [Flex-Basis]: Der Standard-Referenzwert definiert das elastische Element der Box.

Im folgenden Beispiel wird ein erstes Teil elastisches Element nimmt 2/4 des Raumes, die beiden anderen jeweils 1/4 Raum:

Weitere Beispiele

Erstellen Sie eine ansprechende Seite ein elastisches Feld mit

CSS3 Flexible Box-Eigenschaften

Die folgende Tabelle listet häufig zu Feld in den elastischen Eigenschaften verwendet: