Beispielerklärung zum Flex-Layout

Mit dem Flex-Layout können wir schnell einige Blöcke anordnen, um den gewünschten Effekt zu erzielen, ohne uns um Float, Position usw. kümmern zu müssen. Beim Layouten von Webseiten verwenden wir häufig spezielle Layouts, und Flex kann uns dabei helfen Layout, keine Positionierung erforderlich.

Jede Box kann als Flex-Layout festgelegt werden. Beachten Sie jedoch, dass nach der Einstellung auf Flex-Layout die Attribute float, clear und vertical-align der untergeordneten Elemente unverändert bleiben ungültig.

Schauen wir uns die Beispiele an, die uns häufig auf unserer Website begegnen: Wir möchten Bilder und Text zentrieren und an das untere Layout anhängen. Die Erfahrung hat gezeigt, dass der übergeordnete Container text-align:center setzt. Aber die vertikale Richtung ist sehr umständlich ;

aber pass auf: Obwohl du das Bild ändern kannst und die Größe inkonsistent ist, haha, weine einfach Sie müssen es nur im

übergeordneten Container {

}

    display: flex;
    flex-direction:column;//让子元素纵向布局
    justify-content:flex-end;//子元素垂直方向布局，依次向下
    align-items: center;//让子元素水平方向居中

festlegen Wenn Sie es vertikal zentrieren, müssen Sie ebenfalls nur

justify-content:center;垂直方向居中

Dies ist das übliche Oben-Unten-Layout

如果是想要图片居顶部,文字居底部;justify-content: space-between;//两端对齐

(Standardwert):

justify-content有下面几个属性

• : Ebenso wird die Spalte ausgerichtet unten und die Zeile ist rechtsbündig flex-start

  flex-direction:column时候为上对齐

  flex-direction:row为左对齐

: Zentriert

• flex-end

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

• center

: 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.

• space-between

  Es ist noch einfacher. Wenn Sie an Flex interessiert sind, können Sie es selbst ausprobieren.
• Die folgenden 6 Attribute sind auf dem Container festgelegt.

  space-around

Flex-Richtung

Flex-Wrap

Flex-Flow

• justify-content

• align-items

• align-content

Das Flex-Direction-Attribut

• bestimmt die Richtung der Hauptachse (d. h. die Anordnungsrichtung von Elementen).

Es kann 4 Werte haben.

flex-direction (Standardwert): Die Hauptachse ist horizontal und der Startpunkt liegt am linken Ende.

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

: Die Hauptachse ist horizontal und der Startpunkt liegt am rechten Ende.

: Die Hauptachse ist vertikal und der Startpunkt liegt am oberen Rand.

• row

: Die Hauptachse ist vertikal und der Startpunkt liegt am unteren Rand.

• row-reverse

Zeile und Spalte wurden oben demonstriert, d.                                                                           
• Spaltenumkehr ist vertikal umgekehrte Reihenfolge

  column

• column-reverse

Flex-Wrap-Attribut

Standardmäßig sind Elemente entlang einer Linie angeordnet (auch „Achse“ genannt).

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

flex-flow

ist die Kurzform des Attributs

und des Attributs sowie der Standardwert ist

.

align-items-Attributflex-wrap

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

align-items dient dazu, die Positionsbeziehung in zu ändern die vertikale Richtung ;justify-content ist die sich ändernde Positionsbeziehung in horizontaler Richtung

flex-flowflex-direction flex-wraprow nowrap Es kann 5 Werte annehmen. Die konkrete Ausrichtung hängt von der Richtung der Querachse ab. Im Folgenden wird davon ausgegangen, dass die Querachse von oben nach unten verläuft.

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

: Der Startpunkt der Querachse wird ausgerichtet.

align-items:其实跟justify-content属性差不多,如果在没有指定flex-direction;的时候 

: Der Endpunkt der Querachse wird ausgerichtet.

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

: Der Mittelpunkt der Querachse wird ausgerichtet.

: Die Grundlinienausrichtung der ersten Textzeile des Elements.

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 align-content:center;就是让这三排盒子垂直方向居中                         

   如果你设置为align-item:content;就没有让三个盒子一起垂直居中的效果了

 

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

 

下面讲一点flex应用在子集元素上

flex-grow属性

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

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

 

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

 如果给所有子集都设置flex-grow:1;将会成右边图,平分宽度;同理也可以平分高度;

例如给第三个盒子设置flex-grow:2,效果如下,第三个盒子分的宽度为其他的2倍

 

 

 

flex-basis属性

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

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

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

其实这个跟flex-grow差不多,区别就在于可以单独设置其中某一个盒子的占比(长度或者宽度)

给第三个盒子设置flex-basis:100px;

给第九个盒子设置flex-basis:200px

 

 

flex属性

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

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

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

第三个盒子align-self:flex-end;

第五个盒子align-self;stretch;

第九个盒子align-self:flex-start;

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