Verstehen Sie das elastische CSS3 FlexBox-Layout in 10 Minuten

Grundlegende Einführung

Merkmale

• Flexbox ist ein CSS-Anzeigetyp, der eine einfachere und effizientere Layoutmethode bietet.
• Flexbox kann Elemente relativ zu übergeordneten und gleichgeordneten Elementen positionieren, skalieren und absetzen.
• Flexbox bietet gute Unterstützung für Reaktionsfähigkeit;

So funktioniert es

Wenn Sie display Anzeigeeigenschaft des übergeordneten Elements auf flex setzen, werden alle untergeordneten Elemente zu flex item , die die Anordnung, Größe, den Abstand usw. der untergeordneten Elemente steuern können.

Kompatibilität

Flex-Container

Schauen wir uns zunächst das einfachste Flex-Beispiel an. Das äußere Div wird display: flex gesetzt, um ein Flex-Container zu werden, und die drei inneren Divs werden automatisch zu Flex-Elementen:

html:

<div Klasse="Flex-Container">
  <div Klasse="Box eins"></div>
  <div Klasse = "Box zwei"></div>
  <div Klasse = "Box drei"></div>
</div>

CSS:

.flex-container{ max. Breite: 960px; Rand: 0 auto; Anzeige:flex; }
.box{ Höhe: 100px; Mindestbreite: 100px; }
.one{ Hintergrund: rosa; }
.zwei{ Hintergrund: hellgrün; }
.drei{ Hintergrund: himmelblau; }

Wirkung:

Der Effekt ist ähnlich wie beim schwebenden Layout, aber wenn Sie es schwebend implementieren, müssen Sie mehr Code schreiben, während es bei Flex in einer Zeile geht.

1. Inhalt begründen

Wenn das Flex-Element zentriert werden soll, können wir dem Flex-Container eine CSS-Eigenschaft hinzufügen: justify-content , die die Ausrichtung des Flex-Elements auf der Hauptachse steuert (bestimmt durch flex-drection, standardmäßig horizontal):

.flex-container{
  ...
  Inhalt ausrichten: zentriert;
}

Der Effekt ist wie unten dargestellt:

Darüber hinaus kann justify-content auch auf flex-start , flex-end , space-around , space-between , space-even und andere Werte eingestellt werden. Bitte experimentieren Sie selbst, um den spezifischen Effekt zu sehen.

2. Elemente ausrichten

Nachdem die Zentrierung in Flexrichtung erreicht ist, kann mithilfe von align-items eine Zentrierung senkrecht zur Hauptachse (Querachse) erreicht werden.

CSS:

.flex-container{
  maximale Breite: 960px;
  Rand: 0 automatisch;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Höhe: 200px;
  Hintergrundfarbe: weiß;
  Elemente ausrichten: zentrieren;
}

Wirkung:

Die Verwendung von Flex löst das komplexe Problem der vertikalen Zentrierung in CSS! Entsprechend verfügt align-items auch über weitere Werte wie flex-start und flex-end .

3. Flexrichtung

flex-direction bestimmt die Hauptachsenrichtung, also die Richtung, in der Flex-Elemente angeordnet werden. Neben der standardmäßigen row können Flex-Elemente auch vertikal oder umgekehrt (Zeilenumkehr/Spaltenumkehr) angeordnet werden:

CSS:

.flex-container{
  ...
  
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
}

Wirkung:

4. Flex-Wrap

Wenn wir das Flex-Element nicht komprimieren möchten, wenn das Fenster schmaler wird, aber das Flex-Element, das die Grenze überschreitet, umbrechen möchten, können wir den flex-wrap des Flex-Containers festlegen:

.flex-container{
  maximale Breite: 960px;
  Rand: 0 automatisch;
  Anzeige: Flex;
  Flex-Wrap: Umwickeln;
}

.Kasten{
  Höhe: 100px;
  Mindestbreite: 300px;
  Flex-Wachstum: 1;
}

Wenn wir das Fenster komprimieren, ist der Effekt wie folgt:

Flex Wrap hat auch einen Wert: wrap-reverse . Nach dem Festlegen dieses Wertes werden die umschlossenen Elemente über anderen Elementen angeordnet:

Daraus können wir ersehen, dass Flex Wrap Media Query bis zu einem gewissen Grad ersetzen kann.

5. Flex Row

Schließlich können flex-direction und flex-wrap zu einer Eigenschaft flex-flow , kombiniert werden, zum Beispiel: flex-flow: row-reverse wrap .

Flex-Artikel

1. Flexibel wachsen

In allen obigen Beispielen belegen die drei Flex-Elemente nur einen kleinen Teil des Flex-Containers. Wenn wir möchten, dass das Flex-Element den Flex-Container füllt, müssen wir flex-grow für das Flex-Element festlegen. Wie der Name schon sagt, bedeutet „grow“ Wachstum und wird verwendet, um die Erweiterung der Größe von Flex-Elementen zu steuern.

Ändern Sie das CSS wie folgt:

.Kasten { 
    Höhe: 100px; 
    Mindestbreite: 100px; 
    Flex-Wachstum: 1; 
}

Wirkung:

Sie können sehen, dass die drei untergeordneten Elemente den Raum des übergeordneten Elements gleichmäßig aufteilen, da ihr flex-grow zu diesem Zeitpunkt 1 beträgt. Was passiert, wenn nur für ein untergeordnetes Element flex-grow festgelegt ist?

CSS:

.box{ Höhe: 100px; Mindestbreite: 100px; }
.one{ Hintergrund: rosa; Flex-Grow: 1; }

Wirkung:

Zu diesem Zeitpunkt bleiben die Größen von zwei und drei unverändert, während eins den verbleibenden Platz des übergeordneten Elements einnimmt.

Wenn wir flex-grow von eins auf 2 und von zwei und drei auf 1 ändern, schauen wir mal, was passiert:

CSS:

.box{ Höhe: 100px; Mindestbreite: 100px; Flex-Grow:1; }
.one{ Hintergrund: rosa; Flex-Grow: 2; }

Wirkung:

Sie können sehen, dass die Breite von eins doppelt so groß geworden ist wie die von zwei und drei, sodass die Größe des Flex-Elements proportional zum Wert von flex-grow ist.

2. Flex-Schrumpf

Das Gegenteil von flex-grow ist flex-shrink flex-shrink , das verwendet wird, um die Komprimierung von Unterelementen zu steuern, nachdem die Größe der Unterelemente den Flex-Container überschreitet. Siehe das Beispiel:

Ändern Sie die Breite der Box auf 1/3 des Flex-Containers, und flex-shrink von eins, zwei und drei beträgt jeweils 1, 2 und 3:

.box{ Höhe: 100px; Breite: 320px; }
.one{ Hintergrund: rosa; Flex-Shrink: 1; }
.zwei{ Hintergrund: hellgrün; Flex-Shrink: 2; }
.drei{ Hintergrund: himmelblau; Flex-Shrink: 3; }

Bei normaler Fenstergröße ist der Effekt wie folgt:

Wenn wir das Fenster komprimieren, um es schmaler zu machen, ist der Effekt wie folgt:

Wenn die Breite des Flex-Containers 540 Pixel erreicht, werden die untergeordneten Elemente in unterschiedlichem Maße komprimiert. Die komprimierten Breiten von eins, zwei und drei betragen 250px, 180px bzw. 110px. Verglichen mit der ursprünglichen Breite von 320px betragen die komprimierten Breiten also 70px, 140px bzw. 210px. 70 : 140 : 210 = 1 : 2 : 3 , was umgekehrt proportional zum Wert von Flex Shrink ist. Tatsächlich hängt die Komprimierungsrate auch von der Anfangsgröße des Flex-Elements ab, aber wenn die Anfangsgröße gleich ist, wird ihr Einfluss ignoriert.

Unter der Annahme, dass Flex Shrink fs ist, die Anfangsgröße des Flex-Elements is und die komprimierte Größe des Flex-Elements ss ist, lautet der korrekte Ausdruck:

fs ∝ ist/ss

3. Flex-Basis

Flex-Basis wird verwendet, um die anfängliche Breite/Höhe des Flex-Elements festzulegen. Warum müssen wir eine Flex-Basis hinzufügen, wenn wir bereits Breite und Höhe haben? Die Unterschiede zwischen Flex-Basis und Breite/Höhe sind wie folgt:

1. „Flex-Basis“ kann nur für Flex-Elemente verwendet werden, während „Breite/Höhe“ auf andere Elementtypen angewendet werden kann.
2. Flex-Basis ist mit Flex-Richtung verknüpft. Wenn Flex-Richtung eine Zeile ist, legt Flex-Basis die Breite fest. Wenn Flex-Richtung eine Spalte ist, legt Flex-Basis die Höhe fest.
3. Wenn ein Flex-Element absolut positioniert ist, funktioniert die Flex-Basis nicht, Breite/Höhe jedoch schon.
4. „flex-basis“ kann als Kurzform von „flex“ verwendet werden, beispielsweise: „flex: 1 0 200px;“

Schauen wir uns die Rolle von Flex-Basis an und ändern das CSS wie folgt:

.Kasten{
  Höhe: 100px;
  Flex-Wachstum: 1;
}
.eins{
  Hintergrund: rosa;
  Flex-Basis: 100px;
}
.zwei{
  Hintergrund: hellgrün;
  Flex-Basis: 200px;
}
.drei{
  Hintergrund: himmelblau;
  Flex-Basis: 300px;
}

Bei allen drei Flex-Elementen wird zur ursprünglichen Breite die gleiche Breite addiert:

Natürlich hat dieses Beispiel denselben Effekt, wenn stattdessen width verwendet wird. Obwohl der Effekt derselbe ist, ist die Bedeutung jedoch unterschiedlich. Wenn Sie Flex-Layout verwenden, sollten Sie daher versuchen, die Spezifikationen einzuhalten und die richtige Person auszuwählen, um das Richtige zu tun.

4. Bestellung

Über order -Attribut können wir die Reihenfolge von Flex-Elementen ändern, zum Beispiel:

html:

<Abschnitts-ID="Blöcke">
  <div Klasse="eins">1</div>
  <div Klasse="zwei">2</div>
  <div Klasse="drei">3</div>
  <div Klasse="vier">4</div>
</Abschnitt>

CSS:

#Blöcke{
  Anzeige: Flex;
  Rand: 10px;
  Inhalt ausrichten: Abstand dazwischen;
}

#blöcke div{
  flexibel: 0 0 100px;
  Polsterung: 40px 0;
  Textausrichtung: zentriert;
  Hintergrund: #ccc;
}

Die Standardreihenfolge basiert auf der Reihenfolge, in der die Flex-Elemente im HTML erscheinen:

Wenn wir den order des Flex-Elements ändern, wird das Flex-Element entsprechend dem Bestellwert in aufsteigender Reihenfolge sortiert:

CSS:

.one{ Bestellung: 4; }
.zwei{ Bestellung: 3; }
.drei{ Reihenfolge: 2; }
.vier{ Reihenfolge: 1; }

Wirkung:

Abschluss

Dies ist eine kurze Einführung in Flex. Flex ist sehr leistungsstark und einfach. Ich hoffe, Sie werden Freude daran haben, es zu benutzen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.