Verständnis des neuesten Flex-Layouts in HTML

Jedes Mal, wenn wir die Front-End-Seite gestalten, verwenden wir einige Attribute wie Float, Position, Rand usw. Die Verwendung dieser Attribute ist etwas umständlich und der Browser verbraucht beim Rendern viel Leistung

Heute sprechen wir über das neueste Flex-Layout, auch elastisches Layout genannt!

Es ist zu beachten, dass jeder Container als Flex-Layout bezeichnet werden kann, aber Float, Clear und Vertical-Align sind im Flex-Layout alle ungültig.

Hauptachsenrichtung

Der Flex-Container ist in x-Achse und y-Achse unterteilt. Die positive Richtung der x-Achse verläuft standardmäßig von links nach rechts und die positive Richtung der y -axis standardmäßig von oben nach unten.

Definieren Sie einen Container als flexibles Layout display:flex; die Standardrichtung der Hauptachse ist von links nach rechts

Wenn wir die Standardrichtung von Flex ändern möchten, müssen wir verwenden Das Flex-Direction-Attribut „FlexDirection“ hat vier Attributwerte, nämlich „row“, „row-reverse“, „column“ und „column-reverse“, die von links nach rechts, von rechts nach links, von oben nach unten und von unten nach oben verlaufen!

Ausrichtung in Hauptachsenrichtung

justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离，前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

Vertikale einzeilige Ausrichtung!

align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式

Zeilenumbruch für Unterelemente

flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行

Vertikale mehrzeilige Ausrichtung!

align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around

Die oben genannten Attribute sind dem übergeordneten Element hinzugefügt

Einige Attribute von Unterelementen

order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值

Die oben genannten drei Attribute können abgekürzt werden, z. B. Flex : 1 ,1,1 sind in der Reihenfolge wie oben

Wenn es Fehler gibt, korrigieren Sie mich bitte und lassen Sie uns hart zusammenarbeiten!

Das obige ist der detaillierte Inhalt vonVerständnis des neuesten Flex-Layouts in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!