Flex - CSS-Tricks

Die flexEigenschaft ist eine Untereigenschaft des Moduls Flexible Box Layout.

Dies ist die Abkürzung für flex-grow, flex-shrinkund flex-basis. Der zweite und dritte Parameter ( flex-shrinkund flex-basis) sind optional.

Syntax

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Hier ist die Übersicht darüber, was die Werte abhängig von der Anzahl der von Ihnen angegebenen Werte abbilden:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Gemeinsame Werte für flex

flex: 0 auto;

Dies ist dasselbe wie flex: initial;und die Abkürzung für den Standardwert : flex: 0 1 auto. Die Größe des Elements basiert auf seinen width/ heightEigenschaften (oder seinem Inhalt, falls nicht festgelegt).

Es macht das Flex-Element unflexibel, wenn noch Platz frei ist, lässt es jedoch auf ein Minimum schrumpfen, wenn nicht genügend Platz vorhanden ist. Die Ausrichtungsfähigkeiten oder auto-ränder können verwendet werden, um flexible Elemente entlang der Hauptachse auszurichten.

flex: auto;

Dies entspricht flex: 1 1 auto. Beachten Sie, dass dies nicht der Standardwert ist. Die Größe des Elements basiert auf seinen width/ heightEigenschaften, macht es jedoch vollständig flexibel, sodass sie zusätzlichen Platz entlang der Hauptachse absorbieren.

Wenn alle Elemente entweder sind flex: auto, flex: initialoder flex: nonejeder verbleibende Raum nach den Einzelteilen bemessen wurde , wird mit gleichmäßig auf die Positionen verteilt werden flex: auto.

flex: keine;

Dies entspricht flex: 0 0 auto. Es dimensioniert den Artikel entsprechend seinen width/ heightEigenschaften, macht ihn jedoch vollständig unflexibel.

Dies ist ähnlich, flex: initialaußer dass es auch in einer Überlaufsituation nicht schrumpfen darf.

biegen:

Entspricht flex: 1 0px. Es macht das Flex-Element flexibel und setzt die Flex-Basis auf Null, was zu einem Element führt, das den angegebenen Anteil des verbleibenden Platzes erhält.

Wenn alle Elemente im Flex-Container dieses Muster verwenden, sind ihre Größen proportional zum angegebenen Flex-Faktor.

Demo

Die folgende Demo zeigt dank der flexEigenschaft ein sehr einfaches Layout mit Flexbox :

Hier ist das offenbarte Stück Code:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Erstens haben wir Flex-Elemente autorisiert, die in mehreren Zeilen mit angezeigt werden sollen flex-flow: row wrap.

Dann weisen wir sowohl die Kopf- als auch die Fußzeile an, 100% der aktuellen Ansichtsfensterbreite zu übernehmen, egal was passiert.

Der Hauptinhalt und beide Seitenleisten teilen sich dieselbe Zeile und teilen sich den verbleibenden Platz wie folgt: 66% (2 / (1 + 2)) für den Hauptinhalt, 33% (1 / (1 + 2)) für die Seitenleiste .

Browser-Unterstützung

• ( h ) bedeutet , die kürzlich von der Syntax - Spezifikation (z display: flex;)
• (hybrid) bedeutet eine ungerade nicht offizielle Syntax ab 2011 (z display: flexbox;)
• (alt) bedeutet die alte Syntax von 2009 (zB display: box;)

Chrom	Safari	Feuerfuchs	Oper	IE	Android	iOS
21+ (modern) 20- (alt)	3.1+ (alt)	2-21 (alt) 22+ (neu)	12.1+ (modern)	10+ (Hybrid)	2.1+ (alt)	3,2+ (alt)

Blackberry Browser 10+ unterstützt die neue Syntax.

Weitere Informationen zum Mischen von Syntaxen, um die beste Browserunterstützung zu erhalten, finden Sie in diesem Artikel (CSS-Tricks) oder in diesem Artikel (DevOpera).