flexLayout ist die am häufigsten verwendete und herausragende Funktion in CSS3. Sie ist etwas kompliziert und unterteilt sich in Attribute, die auf den Container angewendet werden, und Attribute auf das Element, also auf das übergeordnete Element Element und auf dem untergeordneten Element.
Anzeige: Flex
<style>p{display: flex; background-color: yellow;}b{background-color: red;}</style><body> <p> <b>a</b><b>b</b><b>c</b><b>d</b><b>e</b><b>f</b><b>g</b><b>h</b><b>i</b> </p></body>Wenn das übergeordnete Element auf <🎜 eingestellt ist > wird das übergeordnete Element selbst als Element auf Blockebene angezeigt. Wenn Sie es als Inline-Element anzeigen möchten, können Sie flex verwenden. Alle untergeordneten Elemente, egal ob auf Blockebene oder inline, werden sofort zum Inline-Layout. Dies liegt an den Standardwerten anderer Attribute und kann später geändert werden. inline-flex
<style>p{display: flex; background-color: yellow; margin: 5px;}p.row{ flex-direction: row;}p.row-reverse{ flex-direction: row-reverse;}p.column{ flex-direction: column;}p.column-reverse{ flex-direction: column-reverse;}b{background-color: red;}</style><body> <p class="row"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="row-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="column"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="column-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body> bestimmt die Anordnung des Kindes Elemente Richtung, Standardwert flex-direction. row
<style>p{display: flex; background-color: yellow; margin: 5px; }p.nowrap{ flex-wrap: nowrap;}p.wrap{ flex-wrap: wrap;}p.wrap-reverse{ flex-wrap: wrap-reverse;}b{background-color: red; width: 100px;}</style><body> <p class="nowrap"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="wrap"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="wrap-reverse"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body> Bestimmt, wie untergeordnete Elemente behandelt werden sollen, wenn sie eine Zeile überschreiten Der Standardwert ist: flex-wrap komprimiert die Breite der untergeordneten Elemente, nowrap ist ein Zeilenumbruch und wrap dient zum Hinzufügen einer neuen Zeile nach oben. Hinweis: Dies wird unter der Voraussetzung diskutiert, dass die Hauptachse die X-Achse ist. wrap-reverse
<style>b{background-color: red; }p{display: flex; background-color: yellow; margin: 5px; }p.start{ justify-content: flex-start;}p.end{justify-content: flex-end;}p.center{ justify-content: center;}p.space-between{ justify-content: space-between;}p.space-around{ justify-content: space-around;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-between"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-around"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body> bestimmt die Position des untergeordneten Elements auf der Hauptachse (derzeit die X-Achse), Standardwert justify-content. Die Lücke zwischen flex-start und space-between wird zu gleichen Teilen durch den zusätzlichen Platz geteilt, letzterer umfasst jedoch auch Platz für das linke und rechte Ende. space-around
<style>b{background-color: red; width: 40px;}b:nth-child(1){}b:nth-child(2){font-size: 30px; height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}p{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; }p.start{ align-items: flex-start;}p.end{ align-items: flex-end;}p.center{ align-items: center;}p.baseline{ align-items: baseline;}p.stretch{ align-items: stretch;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="baseline"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="stretch"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body> Bestimmt die Ausrichtung von Elementen auf der Sekundärachse (derzeit die Y-Achse). ) Weg. Der Standardwert align-items bedeutet, dass das untergeordnete Element, wenn es keine Höhe festlegt, die Höhe der übergeordneten Klasse ausfüllt. stretch
<style>b{background-color: red; width: 100px;}p{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; height: 70px;}p.start{ align-content: flex-start;}p.end{ align-content: flex-end;}p.center{ align-content: center;}p.space-between{ align-content: space-between;}p.space-around{ align-content: space-around;}p.stretch{ align-content: stretch;}</style><body> <p class="start"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="end"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="center"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-between"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="space-around"> <b>a</b><b>b</b><b>c</b><b>d</b> </p> <p class="stretch"> <b>a</b><b>b</b><b>c</b><b>d</b> </p></body> bedeutet, dass jede Zeile aktiviert ist, wenn das untergeordnete Element mehrere Zeilen hat die sekundäre Achse (ist derzeit die Position auf der Y-Achse). Der Standardwert ist align-content, was bedeutet, dass die Höhe jeder Zeile untergeordneter Elemente geändert wird, bis das übergeordnete Element gefüllt ist. stretch
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{order: -1;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body> bedeutet, Elemente derselben Ebene von klein nach groß anzuordnen. Der Standardwert ist order. 0
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{flex-grow: 1; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body> bedeutet, wenn auf der Hauptachse (derzeit X) noch Platz vorhanden ist Achse), der Anteil, der durch die gleichmäßige Aufteilung des Raums eingenommen wird. Der Standardwert ist flex-grow, was bedeutet, dass er keinen Platz beansprucht. Das aktuelle Raumhalbierungsverhältnis ist 0, sodass c den gesamten verbleibenden Platz einnimmt. 0 : 0 : 1 : 0
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; width: 100px; flex-shrink: 0;}b.test{flex-shrink: 1; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body> bedeutet, dass die Hauptachse (derzeit die X-Achse) nicht genügend Platz hat Um alle zu füllen, wie sollen die Unterelemente komprimiert werden? Der Standardwert ist flex-shrink, was bedeutet, dass die Komprimierung im gleichen Verhältnis erfolgt bedeutet, dass der gesamte Raum um c komprimiert wird. 11 : 1 : 1 : 10 : 0 : 1 : 0
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b.test{flex-basis: 100px; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>. Der Standardwert ist flex-basis, was bedeutet, dass er gleich width oder height ist. autowidthheight
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b:nth-child(1){height: 20px;}b:nth-child(2){height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}b.test{align-self: flex-end; background-color: green;}</style><body> <p class="start"> <b>a</b><b>b</b><b class="test">c</b><b>d</b> </p></body>align-self 表示当前元素可以覆盖父元素 align-items 所决定的副轴（当前为Y轴）上的方向。默认 auto，即不设置。可选择与 align-items 一致，auto | flex-start | flex-end | center | baseline | stretch 。
flex-direction:row 作为子元素排序方向为基础。如果改为 flex-direction:column ，主轴将为变成 Y 轴，而副轴将变成 X 轴，所有属性的效果将会改变，这个留给读者自行实践。
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS3-Flex-Layout-Beispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
