【CSS3】 CSS3: Flex-Box

1. Was ist Flex-Layout?

2. So geben Sie einen Container als Flex-Layout an

3. Grundlegende Syntax von Flex

1. display

2. flex-direction

3. justify- Inhalt

4. align-items

5. Flywrap

6. align-self

7. Flex-Flow

8. Flex

9. Bestellung

4. Beispiel

1. Layout der Würfel

2. Layout des Heiligen Grals

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

3. Grundlegende Syntax von Flex

Anzeige

: display:flex;

gibt Flex an.

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

N:

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

上面代码中，p元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

.box {  display: flex;}

设置项目的对齐方式，就能实现居中对齐和右对齐。

.box {  display: flex;  justify-content: center;}

.box {  display: flex;  justify-content: flex-end;}

设置交叉轴对齐方式，可以垂直移动主轴。

.box {  display: flex;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: flex-end;}

.box {  display: flex;  justify-content: flex-end;  align-items: flex-end;}

1.2 双项目

.box {  display: flex;  justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;  align-items: center;}

.box {  display: flex;  flex-direction: column;  
justify-content: space-between;  align-items: flex-end;}

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

.box {  display: flex;  
justify-content: space-between;}.item:nth-child(2) {  align-self: flex-end;}

1.3 三项目

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

1.4 四项目

.box {  display: flex;  flex-wrap: wrap;  justify-content: flex-end;  
align-content: space-between;}

HTML代码如下。

<p class="box">  <p class="column"><span class="item">><span class="item">>  >  
<p class="column"><span class="item">><span class="item">>  >>

CSS代码如下。

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}
.column {  flex-basis: 100%;  display: flex;  justify-content: space-between;}

1.5 六项目

.box {  display: flex;  flex-wrap: wrap;  align-content: space-between;}

.box {  display: flex;  
flex-direction: column;  
flex-wrap: wrap;  
align-content: space-between;
}

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

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

1.6 九项目

.box {  display: flex;  flex-wrap: wrap;}

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>

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中文网（www.php.cn）！