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

1. Was ist das Flex-Layout? Die traditionelle Lösung für das

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

Zweitens, wie man einen Container als Flex-Layout angibt

Sie müssen nur das Anzeigeattribut mit einem Wert von hinzufügen Flex im Behälter.

.box{
  display: flex;
}

Nach dem Login kopieren

3. Grundlegende Syntax von Flex

flex-direction

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 ausrichten

Syntax:
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=(W₂-N*W₁)/(2N)

x: Die auf beiden Seiten verbleibende Breite.

W₂: ist die Breite des Moduls.

W₁: Die Breite eines Submoduls (jeweils gerade).

align-items

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:

flex-wrap

Syntax: flex-flow: nowrap | 🎜>align-content Syntax: align-
content

flex

start
| Flex-Ende | Mitte | Raum-zwischen | Raum-rund |dehnen Legen Sie die Ausrichtung jedes einzelnen fest Linie Weg. align-self Syntax:
align

self

auto

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

flex-shrink

flex-basis

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

|initial|inherit;

Gibt die Reihenfolge der flexiblen Module an, wobei der Wert Je kleiner der Wert, desto höher die Priorität. Es kann ein negativer Wert sein.

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.1 单项目

首先，只有左上角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

1.2 双项目

.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

1.3 三项目

.box {  display: flex;}.item:nth-child(2) {  align-self: center;}.item:nth-child(3) {  
align-self: flex-end;}

Nach dem Login kopieren

1.4 四项目

.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

1.5 六项目

.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

1.6 九项目

.box {  display: flex;  flex-wrap: wrap;}
Nach dem Login kopieren

2,圣杯布局

圣杯布局（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>

Nach dem Login kopieren

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

Nach dem Login kopieren

以上就是【CSS3】 CSS3:弹性盒子（Flex Box）的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！