Flex-Layout-Methode des Anzeigeattributs in CSS3

Beim Erlernen des WeChat-Applets und beim Entwerfen des Homepage-Layouts bin ich auf eine neue Layoutmethode gestoßen, display:flex. In diesem Artikel wird hauptsächlich die Flex-Layoutmethode des Anzeigeattributs in CSS3 vorgestellt Ich teile es mit allen und gebe es als Referenz. Ich hoffe, es kann allen helfen.

 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: #b3d4db;
 }

Der Effekt nach der Kompilierung ist sehr offensichtlich, das Layout der Benutzeroberfläche ist ebenfalls sehr vernünftig und sieht sehr klar aus. Wofür wird dieses Attribut verwendet?

Flex ist die Abkürzung für Flexible Box, was „flexibles Layout“ bedeutet und verwendet wird, um maximale Flexibilität für kastenförmige Modelle zu bieten. Nach der Einstellung auf das Flex-Layout sind die Attribute „float“, „clear“ und „vertikal-align“ der untergeordneten Elemente ungültig.

Es kann auf Container oder Inline-Elemente angewendet werden. (Die obige Beschreibung wird mit der Beschreibung des WeChat-Entwicklertools kombiniert.) Im Jahr 2009 schlug W3C eine neue Lösung vor – das Flex-Layout, mit dem verschiedene Seitenlayouts einfach, vollständig und reaktionsschnell implementiert werden können. Derzeit wird es von allen Browsern unterstützt, was bedeutet, dass die Verwendung dieser Funktion jetzt sicher ist.

Grundkonzepte

Elemente, die das Flex-Layout verwenden, werden als Flex-Container (Flex-Container) oder kurz „Container“ bezeichnet. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, sogenannten Flex-Elementen (Flex-Elementen), die als „Elemente“ bezeichnet werden. Der Container verfügt standardmäßig über zwei Achsen: die horizontale Hauptachse und die vertikale Querachse. Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart bezeichnet, und die Endposition wird als Hauptende bezeichnet; die Startposition der Querachse wird als Queranfang bezeichnet, und die Endposition wird als Querende bezeichnet. Elemente werden standardmäßig entlang der Hauptachse angeordnet. Der von einem einzelnen Projekt eingenommene Raum auf der Hauptachse wird als Hauptgröße bezeichnet, und der von einem einzelnen Element eingenommene Raum auf der Querachse wird als Quergröße bezeichnet.

Die folgenden 6 Eigenschaften werden für den Container festgelegt:

• flex-direction Die Anordnungsrichtung der Elemente im Container ( horizontale Standardanordnung)

• flex-wrap Die Art und Weise, wie Elemente im Container umwickelt werden >

  justify-content　Wie Elemente auf der Hauptachse ausgerichtet werden

• align-items　 Wie Elemente auf der Querachse ausgerichtet werden

• align- content Definiert die Ausrichtung mehrerer Achsen. Diese Eigenschaft hat keine Auswirkung, wenn das Projekt nur eine Achse hat.
flex-direction

Der optionale Wertebereich des Attributs ist Zeile (Standard) Ordnen Sie von links nach rechts entlang der horizontalen Hauptachse an, zeilenumgekehrt von rechts nach links entlang der horizontalen Hauptachse, spaltenweise von rechts oben nach unten und spaltenumgekehrt entlang der vertikalen Hauptachse.

flex-wrap

 .box { 2  flex-direction: row | row-reverse | column | column-reverse; 3 }

Der optionale Wertebereich des Attributs ist nowrap (Standard) ohne Linie Wrapping, Wrap-Zeilenumbruch (die erste Zeile ist oben) und Wrap-Reverse (Sie wissen schon ~)

Flex-Flow

.box{ 2  flex-wrap: nowrap | wrap | wrap-reverse; 3 }

Verbinden Sie im Schreibattribut einfach die Werte der beiden oben genannten Methoden mit || 🎜>

.box { 2  flex-flow: <flex-direction> || <flex-wrap>; 3 }

Die Ausrichtung der Elemente auf der Hauptachse (welche Achse die Hauptachse ist, hängt von der Einstellung des Attributs Flex-Richtung ab)

Flex-Start : Von links oder oben auf der Hauptachse anordnen

Flex-Ende: Von rechts oder unten auf der Hauptachse anordnen

Mitte: In der Mitte auf der Hauptachse anordnen

space-between: Am linken und rechten Ende oder nach oben und unten auf der Hauptachse anordnen. An beiden Enden beginnend anordnen

space-around: Jedes Element ist auf beiden Seiten gleichmäßig verteilt. Daher ist der Abstand zwischen den Elementen doppelt so groß wie der Abstand zwischen den Elementen und dem Rand.

 .box { 2  justify-content: flex-start | flex-end | center | space-between | space-around; 3 }

align-items

Es ist direkt in den Bildern klarer zu erklären

align-content

.box { 2  align-items: flex-start | flex-end | center | baseline | stretch; 3 }

Die Oben wurden die Eigenschaften im Container vorgestellt. Lassen Sie uns über die Eigenschaften der Elemente im Container sprechen:

order Die Reihenfolge der Elemente. Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0.

 .box { 2  align-content: flex-start | flex-end | center | space-between | space-around | stretch; 3 }

flex-grow Das Vergrößerungsverhältnis des Elements. Der Standardwert ist 0. Wenn also noch Platz vorhanden ist, wird es nicht vergrößert.

Flex-Shrink　 Das Schrumpfverhältnis des Artikels, der Standardwert ist 1, das heißt, wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert.

flex-basis Die Hauptgröße des Artikels vor der Zuweisung von überschüssigem Platz. Der Browser verwendet dieses Attribut, um zu berechnen, ob auf der Hauptachse zusätzlicher Platz vorhanden ist. Der Standardwert ist auto, was der Originalgröße des Projekts entspricht.
Flex　ist die Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Der Standardwert ist 0 1 Auto. Die letzten beiden Eigenschaften sind optional.
align-self　Ermöglicht die Ausrichtung eines einzelnen Elements anders als andere Elemente durch Überschreiben des align-items-Attributs. Der Standardwert ist auto, was bedeutet, dass das align-items-Attribut des übergeordneten Elements geerbt wird. Wenn kein übergeordnetes Element vorhanden ist, entspricht dies der Dehnung.

order

     .item {
       order: <integer>;
     }

flex-grow

     .item {
       flex-grow: <number>; /* default 0 */
     }

flex-shrink

     .item {
       flex-shrink: <number>; /* default 1 */
     }

flex-basis

    .item {
       flex-basis: <length> | auto; /* default auto */
    }

flex

     .item {
       flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
     }

align-self

     .item {
       align-self: auto | flex-start | flex-end | center | baseline | stretch;
     }

容器属性和项目属性是可以配合使用的，用法类似于CSS的行内式和嵌入式的道理一样。希望你可以在实际应用中熟练使用。

相关推荐：

html最新的flex布局的理解

2017 css3学习者必备：flex布局实例图文教程

CSS3中关于Flex布局的详解

Das obige ist der detaillierte Inhalt vonFlex-Layout-Methode des Anzeigeattributs in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!