Einführung in die Eigenschaften von Flex am Boxcontainer

Dieser Artikel bietet Ihnen eine Einführung in die Eigenschaften von Flex auf dem Box-Container. Freunde in Not können sich darauf beziehen.

1. Flex-Richtung

wird verwendet, um die Richtung der Flex-Hauptachse anzugeben und dann die Position der Flex-Elemente im Flex-Container zu bestimmen

row，默认值，表示水平方向从左到右排列,此时水平方向为主轴
row-reverse,与row相反
column, 表示竖直方向从上到下排列，此时垂直方向为主轴方向
column-reverse,与column相反

2 . Flex-Wrap

wird verwendet, um anzugeben, ob Flex-Elemente

nowrap,默认值，表示不换行，flex子项可能会溢出
wrap，表示换行，溢出的flex子项会被换到下一行
wrap-reverse,表示反方向换行

3 🎜> entspricht der kombinierten Schreibmethode „Flex-Direction“ mit „Flex-Wrap“

4. Justify-Content

wird verwendet, um Flex-Elemente in horizontaler Richtung auszurichten

flex-start,默认值，表示与行的起始位置对齐
flex-end,表示与行的末尾位置对齐
center，表示与行中间对齐
space-between，表示两端对齐，中间间距相等，注意特殊情况，当剩余空间为负数或者只有一个项时，效果和flex-start相同
space-around，表示间距相等，中间间距是两端的两倍，注意特殊情况，当剩余空间为负数或只有一个项时，效果等同于center

5. align-items

Ausrichtung für vertikale Flex-Elemente

stretch,默认值，当flex子项未设置高度或者高度为auto时，stretch起作用将flex子项高度设置为行高度，在只有一行的情况下，行的高度为容器的高度
flex-start,表示与侧轴开始位置对齐
flex-end,表示与侧轴末尾位置对齐
center，表示与侧轴中间对齐

6. align-content

Dieses Attribut, wenn es nur auf mehrere Zeilen angewendet wird, ist die Ausrichtungsmethode, die für mehrere Zeilen verwendet wird.

stretch,默认值，当flex子项未设置高度或者高度为auto时，stretch起作用将flex子项高度设置为行高度，在只有一行的情况下，行的高度为容器的高度
flex-start,表示与侧轴开始位置对齐,紧靠侧轴开始位置，之后的每一行都紧靠前面一行
flex-end,表示与侧轴末尾位置对齐,紧靠侧轴结束位置，之后的每一行都紧靠前面一行
center，表示各行与侧轴中间对齐
space-between,表示两端对齐，中间间距相等，当剩余空间为负数或者只有一个项时，效果和flex-start相同
space-around，表示间距相等，中间间距是两端的两倍，注意特殊情况，当剩余空间为负数或只有一个项时，效果等同于center

== Wenn dieses Attribut für die Verwendung für mehrere Zeilen vorgesehen ist, ist es bei einem Container mit nur einer ungültig Zeile. Dieses Attribut kann den Abstand zwischen benachbarten Zeilen nach dem Luftwechsel sehr gut handhaben ==Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie im

CSS3-Video-Tutorial die chinesische PHP-Website

Kolumne!

Das obige ist der detaillierte Inhalt vonEinführung in die Eigenschaften von Flex am Boxcontainer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!