Eine kurze Einführung in das Flex-Layout von Anzeigeattributen in CSS3

Dieser Artikel bietet Ihnen eine kurze Einführung in das Flex-Layout des Anzeigeattributs in CSS3. Ich hoffe, dass er für Freunde hilfreich ist.

Ich habe kürzlich etwas über WeChat-Miniprogramme gelernt. Beim Entwerfen des Layouts der Homepage bin ich auf eine neue Layoutmethode gestoßen, display:flex

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

Der Effekt nach der Kompilierung ist sehr Offensichtlich und das Layout der Benutzeroberfläche ist auch 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. Nachdem auf das Flex-Layout eingestellt wurde, sind die Attribute float, clear und vertical-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) heißt main start und die Endposition heißt main end; die Startposition der Querachse heißt cross start und die Endposition heißt cross end. Elemente werden standardmäßig entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Hauptachsenraum wird main size genannt, und der Querachsenraum, der von einem einzelnen Element eingenommen wird, wird cross size genannt.

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

flex-direction Die Anordnungsrichtung der Elemente im Container (standardmäßige horizontale Anordnung)

Flex-Wrap　Die Verpackungsmethode von Artikeln im Container

Flex-Flow　Die Abkürzung der beiden oben genannten Eigenschaften

Justify-Content　Die Ausrichtung von Artikeln auf der Hauptachse

align-items　Item So richten Sie sich an der Querachse aus

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

Flex-Richtung

1 .box { 2 Flex-Richtung: Zeile |. Spalte-Reverse;

Der optionale Wertebereich des Attributs ist Zeile (Standard), angeordnet von links nach rechts entlang der horizontalen Hauptachse, zeilenumgekehrt angeordnet von rechts nach links entlang der horizontalen Hauptachse, Spalte von rechts oben nach unten entlang der vertikalen Hauptachse und Spaltenumkehr.

flex-wrap 1 .box{ 2 flex-wrap: nowrap |.

Der optionale Wertebereich des Attributs ist nowrap (. Standard) kein Zeilenumbruch, Zeilenumbruch (die erste Zeile ist oben) und umgekehrter Zeilenumbruch (Sie wissen schon ~)

flex-flow

1 . box { 2 flex -flow: 5af1bf7cf79c3a6bc68eee34fa8377d5 3 }

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

justify-content

1 .box { 2 justify-content: flex-start |. space-between around; 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: Beginnen Sie am linken und rechten Ende oder am oberen und unteren Ende der Hauptachse. Ordnen Sie

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.

align-items

1 .box { 2 align-items: flex-start |. baseline | Bildbeschreibung ist klarer

align-content

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

Sprechen wir über die Eigenschaften der Elemente im Container:

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

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

flex-shrink　 Das Schrumpfverhältnis des Artikels, der Standardwert ist 1, dh wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert.

flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，项目的本来大小。

flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

order

1     .item {
2       order: <integer>;
3     }

flex-grow

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

flex-shrink

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

flex-basis

1     .item {
2       flex-basis: d82af2074b26fcfe177e947839b5d381 | auto; /* default auto */
3     }

flex

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

align-self

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

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

相关推荐：

css实现布局时可以用的几个技巧（代码）

CSS选择器的代码实例以及css优先级的代码实例

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in das Flex-Layout von Anzeigeattributen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!