Detaillierte Einführung in das flexible Layout (Flex-Layout)

1. Flexibles Layout

Im täglichen Leben verwenden wir häufig Folgendes:

1. Floating + Positionierung

2. Adaptiv (Prozentsatz)

3. Responsives Layout

4. Flexibles Layout (Flex-Layout)

Was Sie heute klären sollten Es handelt sich um ein häufiger verwendetes flexibles Layout, es gibt jedoch einen Unterschied zwischen Block-Tags und Inline-Block-Tags.

{:;
}
input{
　　:;
}

Natürlich kann nicht alles jedem gefallen wie Geld, es hat auch seine eigenen Vor- und Nachteile.

Vorteile: Die Kompatibilität unterstützt alle Browser (Webkit-basierte Browser müssen -webkit- hinzufügen), kann entsprechend den Benutzereinstellungen angepasst werden und jeder Container kann als Flex-Layout festgelegt werden.

Nachteile: Da das flexible Layout anpassbar ist, gibt es enorme Möglichkeiten und die Anpassung erfordert viel Zeit. Einige flexible Designs müssen separat für IE6 entworfen werden, aber ... wie viele Leute verwenden es noch? IE6 ( ⊙﹏⊙)b.

　Hinweis: Wenn wir flexibles Layout verwenden, sind Float, Clear und Vertical-Alignment in CSS ungültig.

2. Attribute des flexiblen Layouts

　Zuallererst ist es das Attribut des Containers mit flexiblem Layout. 　

　1.flex-direction-Attribut

　flex-direction bestimmt die Richtung des Containers.

div {
  flex-direction: row | row-reverse | column | column-reverse;
}

Die vier Werte sind: Zeile (Standardwert) von links nach rechts, Zeilenumkehr von rechts nach links, Spalte von oben nach unten, Spaltenumkehr von unten Nach oben.

　2.flex-wrap-Attribut

Das Standardlayout ist im Allgemeinen dasselbe Wenn in der Zeile das Flex-Wrap-Attribut festgelegt ist, wird der Inhalt, der nicht angeordnet werden kann, automatisch umbrochen.

div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Die vier Werte sind: nowrap (Standardwert), kein Zeilenumbruch, Umbruch nach unten, Umbruch nach oben.

　3.Flex-Flow-Attribut

　Das Flex-Flow-Attribut ist das oben genannte zwei Die Abkürzung des Attributs, der Standardwert ist row nowrap。

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

　4.justify-content attribute

Das justify-content-Attribut definiert die Ausrichtung in Richtung des Containers.

div {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

　flex-start(Standardwert): Nach links ausrichten.

　　flex-end: Nach rechts ausrichten.

　　center: Mittig ausgerichtet.

　　space-between: Richten Sie beide Enden aus, jedes Unterelement hat den gleichen Abstand und es gibt keine Trennung zwischen den Unterelementen und dem Containerrand.

　space-around: Der Abstand auf beiden Seiten jedes untergeordneten Elements ist gleich. Der Abstand zwischen untergeordneten Elementen ist doppelt so groß wie der Abstand zwischen den untergeordneten Elementen und dem Containerrand.

　5.align-items-Attribut

Das align-items-Attribut ist in definiert der vertikale Container Richtungsausrichtung.

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

　flex-start: Richten Sie den Startpunkt in vertikaler Richtung aus.

　　flex-end: Vertikale Endpunktausrichtung.

　　center: In vertikaler Richtung auf den Mittelpunkt ausrichten.

　　baseline: An der Grundlinie des Textes im ersten untergeordneten Element ausgerichtet.

　stretch(Standardwert): Wenn für das untergeordnete Element keine Höhe festgelegt ist oder die Höhe auf „Auto“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.

　6.align-content-Attribut

Das align-content-Attribut definiert das Kind Elemente Ausrichtung in beide Richtungen.

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

　　flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

　　space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

　　space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：占满整个垂直方向。

　　下面就是具有弹性布局容器中子元素的属性

　　1.order属性

　　order属性定义了子元素的排列顺序，数值小的在前。

.son {
  order: <integer>;
}

　　2.flex-grow属性

　　flex-grow属性定义了子元素的放大比例，默认值为0。

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

　　当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。

　　3.flex-shrink属性

　　flex-shrink属性定义了子元素的缩小比例，默认值为1。

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

　　给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。

　　4.flex-basis属性

　　该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

　　5.flex属性

　　该属性为flex-grow, flex-shrink 和 flex-basis的简写。

　　6.align-self属性

　　该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。

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

Auto: Standardwert, der angibt, dass das align-items-Attribut des übergeordneten Elements standardmäßig geerbt wird.

　　flex-start: Vertikal ausgerichteter Startpunkt.

　　flex-end: Vertikale Endpunktausrichtung.

　　center: In vertikaler Richtung auf den Mittelpunkt ausrichten.

　　baseline: An der Grundlinie des Textes im ersten untergeordneten Element ausgerichtet.

　stretch(Standardwert): Wenn für das untergeordnete Element keine Höhe festgelegt ist oder die Höhe auf „Auto“ eingestellt ist, nimmt es die gesamte Höhe des Containers ein.

Flex-Layout (elastisches Layout)

1. Die Eigenschaften des Containers sind: Flex-Richtung: (bestimmt die Richtung der Hauptachse) (d. h. die Richtung der Anordnung der Elemente) value :row/row-reverse/column/column-reverse/ flex-wrap: (So wird umbrochen, wenn eine Achse nicht angeordnet werden kann) Wert: nowrap (Standard): kein Zeilenumbruch. Wrap: Umbruch, mit der ersten Zeile oben. Wrap-Reverse: Wrap, mit der ersten Zeile darunter. flex-flow: (Die Eigenschaft „flex-flow“ ist die Abkürzung der Eigenschaft „flex-direction“ und der Eigenschaft „flex-wrap“. Der Standardwert ist row nowrap) justify-content: (Die Eigenschaft „justify-content“ definiert die Ausrichtung des Elements auf die Hauptachse.) Werte übernehmen: Flex-Start (Standard): linksbündig, Flex-Ende: rechtsbündig, Mitte: zentriert, Abstand zwischen: an beiden Enden ausgerichtet, 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. align-items (wie man an der Querachse ausrichtet) Wert: flex-start/flex-end/center/baseline/stretch align-content (definiert die Ausrichtung mehrerer Achsen. Wenn das Element nur eine Achse hat, hat dieses Attribut keine Wirkung (Funktion) Wert: Flex-Start: Am Startpunkt der Querachse ausrichten. Flex-Ende: am Endpunkt der Querachse ausgerichtet. Mitte: Ausgerichtet am Mittelpunkt der Querachse. Abstand dazwischen: An beiden Enden der Querachse ausrichten, und die Abstände zwischen den Achsen sind gleichmäßig verteilt. space-around: 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. strecken (Standard): Die Achse nimmt die gesamte Querachse ein.                                                                                                                                                                      . Je kleiner der Wert, desto näher ist die Anordnung. Das Flex-Grow-Attribut definiert das Vergrößerungsverhältnis des Elements. Das heißt, wenn noch Platz vorhanden ist, wird es nicht vergrößert Das Flex-Shrink-Attribut definiert das Verkleinerungsverhältnis des Elements. Der Standardwert ist 1. Wenn nicht genügend Platz vorhanden ist, wird das Element verkleinert. Der von Flex-Basis-Elementen eingenommene Hauptachsenraum (Hauptgröße). 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 align-self ermöglicht die Ausrichtung eines einzelnen Elements anders als andere Elemente und überschreibt dabei die Eigenschaft align-items. 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.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das flexible Layout (Flex-Layout). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!