Zusammenfassung des CSS3-Flex-Layouts

Zusammenfassung des CSS3-Flex-Layouts

Im Jahr 2009 schlug W3C eine neue Lösung vor – das Flex-Layout, das einfach und vollständig sein und verschiedene implementieren kann Seitenlayouts responsiv gestalten. Derzeit wird es von allen Browsern unterstützt.

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.

(Empfohlenes Lernen: CSS-Tutorial )

Inline-Elemente können auch das Flex-Layout verwenden.

.box{
  display: flex;
}
.box{
  display: inline-flex;
}

Es ist zu beachten, dass Browser mit Webkit-Kern das Präfix -webkit hinzufügen müssen.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

Außerdem sind nach der Einstellung auf Flex-Layout die Float-, Clear- und Vertical-Align-Attribute von untergeordneten Elementen ungültig.

6 Eigenschaften, die häufig im Flex-Layout verwendet werden

• Flex-Richtung
• Flex-Wrap
• Flex-Flow
• justify-content
• align-items
• align-content

1、flex-direction-Eigenschaft bestimmt die Richtung der Hauptachse ( Das heißt, die Richtung, in der die Elemente angeordnet sind.

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

• Zeile (Standardwert): Die Hauptachse ist horizontal und der Startpunkt liegt am linken Ende.
• Zeilenumkehr: Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende.
• Spalte: Die Hauptachse ist vertikal und der Startpunkt liegt am oberen Rand.
• Spaltenumkehr: Die Hauptachse ist vertikal und der Startpunkt liegt am unteren Rand.

2. <code>2、<strong>flex-wrap</strong>flex-wrap

Attributdefinition: Wenn eine Achsenlinie nicht angeordnet werden kann, wie wird die Linie umbrochen?

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

• nowrap
(Standard): Keine Zeilenumbrüche.
• wrap
: Zeilenumbruch, wobei die erste Zeile oben steht.
• wrap-reverse
: Zeilenumbruch, die erste Zeile steht darunter.

3、<strong>flex-flow</strong>3. Das Attribut <code>flex-directionflex-flowflex-wrap ist die Abkürzung des Attributs row nowrap und des Attributs

und der Standardwert ist

. 4、<strong>justify-content</strong>

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

4, <ul>justify-content<li>-Attribut definiert die Ausrichtung des Elements auf der Hauptachse.

-content: flex-start | flex-end | center | space-between | space-

Flex-Start (Standard): linksbündig

Flex-Ende: rechtsbündig

Mitte: zentriert

Leerzeichen- zwischen: Beide Enden ausrichten, mit gleichem Abstand zwischen den Elementen.

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. 5、<strong>align-items</strong>

5. Das Attribut <li>align-items<code>flex-start definiert, wie Elemente auf der Querachse ausgerichtet werden.

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

• flex-end
: Der Startpunkt der Querachse wird ausgerichtet.
• center
: Der Endpunkt der Querachse wird ausgerichtet.
• baseline
: Richten Sie den Mittelpunkt der Querachse aus.
• stretch
: Die Grundlinienausrichtung der ersten Textzeile des Elements.

6、<strong>align-content</strong> (Standardwert): Wenn das Element keine Höhe festlegt oder auf „Auto“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.

6. Das Attribut <ul>align-content<li> definiert die Ausrichtung mehrerer Achsen. Diese Eigenschaft hat keine Auswirkung, wenn das Projekt nur eine Achse hat. flex-start

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

Dieses Attribut kann 6 Werte annehmen.

flex-end

: Ausgerichtet am Startpunkt der Querachse. center

: Ausgerichtet am Endpunkt der Querachse. space-between

: Ausgerichtet auf den Mittelpunkt der Querachse. space-around

: An beiden Enden der Querachse ausrichten und die Abstände zwischen den Achsen gleichmäßig verteilen. stretch

: Jede Achse hat auf beiden Seiten den gleichen Abstand. Daher ist der Abstand zwischen den Achsen doppelt so groß wie der Abstand zwischen den Achsen und dem Rahmen.

(Standardwert): Die Achse nimmt die gesamte Querachse ein.
• order
Für das Projekt sind außerdem die folgenden 6 Eigenschaften festgelegt.
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

flex-grow0 Das Attribut order definiert die Reihenfolge, in der Elemente sortiert werden. Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0. Das Attribut

.item {
  order: <integer>;
}

flex-growflex-grow definiert das Vergrößerungsverhältnis des Elements. Der Standardwert ist

, d. h. wenn noch Platz vorhanden ist, wird es nicht vergrößert.

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

flex-shrinkWenn alle Elemente ein

-Attribut von 1 haben, teilen sie den verbleibenden Platz (falls vorhanden) gleichmäßig auf. Wenn das

-Attribut eines Elements 2 ist und die anderen Elemente alle 1 sind, nimmt ersteres doppelt so viel verbleibenden Platz ein wie die anderen Elemente. Das Attribut flex-shrinkflex-shrink

definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1, d. h. wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert. <🎜>

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

<🎜>Wenn das <🎜>-Attribut aller Elemente 1 ist und nicht genügend Platz vorhanden ist, werden sie alle proportional reduziert. Wenn das <🎜>-Attribut eines Elements 0 ist und alle anderen Elemente 1 sind, wird ersteres nicht verkleinert, wenn nicht genügend Platz vorhanden ist. <🎜>

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

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

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

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

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

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

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

Das obige ist der detaillierte Inhalt vonZusammenfassung des CSS3-Flex-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!