Was ist Flex-Layout?
So geben Sie einen Container als Flex-Layout an
Grundlegende Syntax von Flex
display
flex-direction
justify- Inhalt
align-items
Flywrap
align-self
Flex-Flow
Flex
Bestellung
Beispiel
Layout der Würfel
Layout des Heiligen Grals
Referenzartikel
-Layout basiert auf dem Box-Modell auf dem Anzeigeattribut + Positionsattribut + Float-Attribut. Bei diesen speziellen Layouts ist dies sehr unpraktisch. Beispielsweise ist eine vertikale Zentrierung nicht einfach zu erreichen. Flex-Layout ist eine 2009 von der W3C-Organisation vorgeschlagene Layoutlösung, mit der verschiedene Seitenlayouts einfach, vollständig und reaktionsschnell realisiert werden können. Derzeit wird es von allen Browsern unterstützt. Flex-Layout wird die bevorzugte Lösung für zukünftige Layouts sein.
Sie müssen nur das Anzeigeattribut mit einem Wert von hinzufügen Flex im Behälter.
.box{
display: flex;
}
: display:flex;
gibt Flex an.
Syntax: flex-direction: row | row-umkehren | Spalte | Spalte-umkehren
Gibt die Reihenfolge an, in der flexible untergeordnete Elemente im übergeordneten Container angeordnet sind. Dies kann auch durch die Einstellung direction:rtl; oder direction:ltr; äquivalent zu implementieren, wobei rtl und ltr rechts nach links, links Abkürzung sind für nach rechts.
Inhalt ausrichtenSyntax:ausrichten-Inhalt:flex-start | Flex-Ende | Mitte | Raum-zwischen | Raum-um
Inhaltsausrichtung ( Die Eigenschaft „justify-content“ wird auf den Flex-Container angewendet, um die Flex-Elemente entlang der Hauptachse des Flex-Containers auszurichten.
Konzeptverständniskarte:
Darunter fasste der Autor eine einfache Formel zusammen:
x=(W2-N*W1)/(2N)
x: Die auf beiden Seiten verbleibende Breite.
W2: ist die Breite des Moduls.
W1: Die Breite eines Submoduls (jeweils gerade).
N:
Syntax: align-items:flex-Anfang |Flex-Ende |Mitte |Grundlinie |Streckung
Stellen Sie die Ausrichtung des Flexbox-Elements in Richtung der Seitenachse (vertikale Achse) ein.
Das folgende Bild kann den Lesern helfen, die Grundlinie zu verstehen:
:Syntax: flex-flow: nowrap | 🎜>align-content Syntax: align-
content
start-| Flex-Ende | Mitte | Raum-zwischen | Raum-rund |dehnen Legen Sie die Ausrichtung jedes einzelnen fest Linie Weg. align-self Syntax:
align
self
:| Flex-Start | Flex-Ende | Mitte | Grundlinie |dehnen Stellen Sie die Ausrichtung des elastischen Elements selbst in Querrichtung ein. Dieses Attribut sollte von align-content unterschieden werden. Der Umfang von align-content ist jede Zeile, aber align-self ist nur ein bestimmtes elastisches Element in einer bestimmten Zeile. Flex-FlowSyntax: Abkürzung für Flex-Direction und Flex-Wrap.
flex
Syntax: flex:flex-growflex-shrink
|initial|inherit;Gibt den Elementzuordnungsraum an. Es ist zu beachten, dass das Flex-Modul eine separate Zeile belegt, wenn die Flex-Basis 100 % beträgt. oder Syntax: order:
number
Beispiel
1. Anordnung der Würfel
Bis zu 9 Punkte können auf einer Seite des Würfels platziert werden.
下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。
如果不加说明，本节的HTML模板一律如下。
<p class="box"> <span class="item">>>Nach dem Login kopieren
上面代码中，p元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。
首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。
.box { display: flex;}Nach dem Login kopieren
设置项目的对齐方式，就能实现居中对齐和右对齐。
.box { display: flex; justify-content: center;}Nach dem Login kopieren
.box { display: flex; justify-content: flex-end;}Nach dem Login kopieren
设置交叉轴对齐方式，可以垂直移动主轴。
.box { display: flex; align-items: center;}Nach dem Login kopieren
.box { display: flex; justify-content: center; align-items: center;}Nach dem Login kopieren
.box { display: flex; justify-content: center; align-items: flex-end;}Nach dem Login kopieren
.box { display: flex; justify-content: flex-end; align-items: flex-end;}Nach dem Login kopieren
.box { display: flex; justify-content: space-between;}Nach dem Login kopieren
.box { display: flex; flex-direction: column; justify-content: space-between;}Nach dem Login kopieren
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center;}Nach dem Login kopieren
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}Nach dem Login kopieren
.box { display: flex;}.item:nth-child(2) { align-self: center;}Nach dem Login kopieren
.box { display: flex; justify-content: space-between;}.item:nth-child(2) { align-self: flex-end;}Nach dem Login kopieren
.box { display: flex;}.item:nth-child(2) { align-self: center;}.item:nth-child(3) { align-self: flex-end;}Nach dem Login kopieren
.box { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: space-between;}Nach dem Login kopieren
HTML代码如下。
<p class="box"> <p class="column"><span class="item">><span class="item">> > <p class="column"><span class="item">><span class="item">> >>Nach dem Login kopieren
CSS代码如下。
.box { display: flex; flex-wrap: wrap; align-content: space-between;} .column { flex-basis: 100%; display: flex; justify-content: space-between;}Nach dem Login kopieren
.box { display: flex; flex-wrap: wrap; align-content: space-between;}Nach dem Login kopieren
.box { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; }Nach dem Login kopieren
HTML代码如下。
<p class="box"> <p class="row"><span class="item">> <span class="item">><span class="item">> > <p class="row"><span class="item">> > <p class="row"> <span class="item">> <span class="item">> >>Nach dem Login kopieren
CSS代码如下。
.box { display: flex; flex-wrap: wrap;} .row{ flex-basis: 100%; display:flex;} .row:nth-child(2){ justify-content: center;} .row:nth-child(3){ justify-content: space-between;}Nach dem Login kopieren
.box { display: flex; flex-wrap: wrap;}Nach dem Login kopieren
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下：
<p class="flex-container"> <header class="header">头部header> <article class="main"><p>主体p> article> <aside class="aside aside1">边栏 1aside> <aside class="aside aside2">边栏 2aside> <footer class="footer">底部footer>p>
CSS代码入下：
.flex-container {
display: -webkit-flex;display: flex;
-webkit-flex-flow: row wrap;flex-flow: row wrap;font-weight: bold;text-align: center;
}
.flex-container > * {padding: 10px;flex: 1 100%;
}
.main {text-align: left;background: cornflowerblue;
}
.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}@media all and (min-width: 600px) {.aside { flex: 1 auto; }}
@media all and (min-width: 800px) {
.main
{
flex: 3 0px;
}
.aside1
{
order: 1;
}
.main
{ order: 2;
}
.aside2 { order: 3; }
.footer
{
order: 4;
}
}以上就是【CSS3】 CSS3:弹性盒子（Flex Box）的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
So speichern Sie Bilder im Douyin-Kommentarbereich auf dem Mobiltelefon
Was soll ich tun, wenn eDonkey Search keine Verbindung zum Server herstellen kann?
Die Beziehung zwischen js und vue
So ändern Sie das Passwort in MySQL
CSS-Bildlaufleistenstil
bootsqm
GeForce 940mx
Gängige Methoden zur Erkennung von Website-Schwachstellen
