Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der CSS3-Flex-Layout-Beispiele

Detaillierte Erläuterung der CSS3-Flex-Layout-Beispiele

零下一度Original: 2017-06-17 14:36:471688Durchsuche

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.

Attribute für das übergeordnete Element

Anzeige: Flex
```
<style>p{display: flex; background-color: yellow;}b{background-color: red;}</style><body> abcdefghi </body>
```
Wenn das übergeordnete Element auf 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

Flex-

Richtung

<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

flex-wrap

<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

justify-content

<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

align-items

<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

align-content

<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

Attribute auf untergeordneten Elementen

Reihenfolge

<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

flex-grow
```
<style>p{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{flex-grow: 1; background-color: green;}</style><body> abcd </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
flex-shrink
```
<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> abcd </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

flex-basis
bedeutet, wenn die Hauptachse (derzeit die X-Achse) die halbiert Leerzeichen: Die zuerst eingenommene Position entspricht der Einstellung
```
<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> abcd </body>
```
, wenn die Hauptachse die X-Achse ist, und wenn die Hauptachse die Y-Achse ist, entspricht sie der Einstellung
. Der Standardwert ist flex-basis, was bedeutet, dass er gleich width oder height ist. autowidthheight

align-self

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

特别注意，为简化布局理解，上面事例都使用了默认的 `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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fassen Sie die Definition und Verwendung der Textdekoration in CSS zusammenNächster Artikel：Fassen Sie die Definition und Verwendung der Textdekoration in CSS zusammen

In Verbindung stehende Artikel

Mehr sehen

Detaillierte Erläuterung der CSS3-Flex-Layout-Beispiele

Attribute für das übergeordnete Element

特别注意，为简化布局理解，上面事例都使用了默认的 flex-direction:row 作为子元素排序方向为基础。如果改为 flex-direction:column ，主轴将为变成 Y 轴，而副轴将变成 X 轴，所有属性的效果将会改变，这个留给读者自行实践。

In Verbindung stehende Artikel

特别注意，为简化布局理解，上面事例都使用了默认的 `flex-direction:row` 作为子元素排序方向为基础。如果改为 `flex-direction:column` ，主轴将为变成 Y 轴，而副轴将变成 X 轴，所有属性的效果将会改变，这个留给读者自行实践。