Verwendung von Flex-Layout

Dieses Mal werde ich Ihnen die Verwendung von Flex-Layout vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Flex-Layout? Hier sind praktische Fälle.

Die traditionelle Lösung für das Layout, die auf dem Box-Modell basiert, basiert auf dem Attribut display + dem Attribut position + dem Float-Attribut. Bei diesen speziellen Layouts ist dies sehr unpraktisch. Beispielsweise ist eine vertikale Zentrierung nicht einfach zu erreichen. Im Jahr 2009 schlug das W3C eine neue Lösung vor – Flex Layout, mit der verschiedene Seitenlayouts einfach, vollständig und responsiv implementiert werden können. Derzeit wird es von allen Browsern unterstützt, was bedeutet, dass die Verwendung dieser Funktion jetzt sicher ist.

Was ist Flex-Layout?

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. Jeder Container kann als Flex-Layout festgelegt werden. Beachten Sie, dass nach der Einstellung von auf Flex-Layout die Ziele float, clear und <a href="http://www.php.cn/wiki/869.html" von untergeordnete elemente das attribut="_blank">vertical-align<code><a href="http://www.php.cn/wiki/869.html" target="_blank">vertical-align</a>

ist ungültig.

Elemente, die das Flex-Layout übernehmen, werden als Flex-Container (Flex-Container) oder kurz „Container“ bezeichnet. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, die als Flex-Elemente (Flex-Elemente) oder kurz „Elemente“ bezeichnet werden.

Containereigenschaften

• Flex-Richtungrow | row-reverse | column | column-reverse; Es gibt vier Werte:

• nowrap | wrap | wrap-reverse;flex-wrap hat drei Werte:

• flex-directionflex-flow Für flex-wraprow nowrap，

• justify -content hat 5 Werte:

  flex-start | flex-end | center | space-between | space-around;

• align-items hat 5 Werte:

  flex-start | flex-end | center | baseline | stretch;

• align-content

Eigenschaften des Artikels

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

• , das heißt, wenn noch Reste vorhanden sind Platz, es wird nicht vergrößert. flex-grow    属性定义项目的放大比例，默认为<code>0

• Das Flex-Shrink-Attribut definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1, d. h. wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert. Negative Werte sind für diese Eigenschaft nicht gültig. <p style="text-align: left;"><code>flex-shrink  属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。

• flex-basis<p style="text-align: left;"><code>flex-basis

• flex Das Attribut ist <code>flex-grow<p style="text-align: left;">, Abkürzung für <code>flex-shrink<code>flex         属性是<code>flex-grow und flex-basis<code>flex-shrink Der Standardwert ist 0 1 auto<code>flex-basis. Die letzten beiden Eigenschaften sind optional. 0 1 auto

• align-self<p style="text-align: left;"><code>align-self

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben , spannender Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Es gibt mehrere Möglichkeiten, die Auswirkungen des Schwebens auf der Seite zu beseitigen

Eingabe-Kontrollkästchen Stiländerung

Das obige ist der detaillierte Inhalt vonVerwendung von Flex-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!