Detaillierte Erläuterung des Anzeigeattribut-Layouts in CSS3

Dieses Mal werde ich Ihnen das Layout des Anzeigeattributs in CSS3 ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für das Layout des Anzeigeattributs in CSS3? ein Blick.

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 auch das Layout der Benutzeroberfläche ist sinnvoll und sieht 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 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 – Flex-Layout, mit der 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 Bereich der optionalen Werte des Attributs ist zeilenweise (Standard) von links angeordnet nach rechts entlang der horizontalen Hauptachse, Zeilenumkehr von rechts nach links entlang der horizontalen Hauptachse, Spalte von rechts oben nach unten entlang der vertikalen Hauptachse und Spaltenumkehr.

flex-wrap

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

Der Bereich der optionalen Werte des Attributs ist nowrap (Standard) ohne Wrapping, Wrap Wrapping (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 von die beiden oben genannten Methoden mit ||.

justify-content

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

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

Flex-Start: Von links oder oben auf der Hauptachse anordnenFlex-End: Von rechts oder unten auf der Hauptachse anordnen

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

Mitte: In der Mitte auf der Hauptachse anordnen

Leerzeichen-zwischen: Beginnend am linken und rechten Ende oder am oberen und unteren Ende auf der Hauptachse anordnen

Leerzeichen- herum: Die Abstände auf beiden Seiten jedes Elements sind gleich. Daher ist der Abstand zwischen den Elementen doppelt so groß wie der Abstand zwischen den Elementen und dem Rand.

align-items

Die Bilder erklären es direkt deutlicher

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

align -content

Das Obige hat die Attribute im Container eingeführt. Lassen Sie uns über die Attribute der Elemente im Container sprechen:

• order　　项目的排列顺序。数值越小，排列越靠前，默认为0。

• flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

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

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

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;
     }

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS定制文本省略的方法

BFC模式详解

css的绝对定位怎么兼容所有的分辨率

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Anzeigeattribut-Layouts in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!