Wie implementiert Flexbox in CSS3 eine horizontale, vertikale Zentrierung und ein dreispaltiges Layout mit gleicher Höhe?

Ich habe in diesen Tagen die Grundkenntnisse von CSS und CSS3 studiert. Als ich die Webseite öffnete, stellte ich fest, dass es so etwas auf der Standard-Homepage von Firefox gibt.

Ich habe das erste CSS-Attribut nicht verstanden. Seitdem begann ich, nach Informationen zu suchen und verschiedene Bücher zu lesen. In diesen Tagen schreibe ich einen Blogbeitrag über mein Verständnis des CSS3-Modells der einziehbaren Layoutbox (Flexbox) mit dem Ziel, eine kurze Einführung in Flexbox zu geben.

Der folgende Inhalt wird in die folgenden Unterabschnitte unterteilt:

1. Konzepte, die Sie über Flexbox in CSS3 beherrschen müssen

2. Flexbox realisiert die horizontale und vertikale Mittenausrichtung

3. Drei Spalten gleicher Höhe sind adaptiv und der Fußzeilenbereich wird an das untere Layout geklebt

1. Was Sie über Flexbox in CSS3 wissen müssen

　Da das adaptive Layout mit drei Spalten und gleicher Höhe sowie die horizontale und vertikale Mittelausrichtung ein gewisses Verständnis der Grundkonzepte von Flexbox in CSS3 erfordern, werde ich im Folgenden eine kurze Einführung in das Konzept von Flexbox geben Beispiele. Machen Sie eine Vorahnung. Ich habe immer geglaubt, dass es sehr wichtig ist, die Konzepte zu verstehen, egal welches Wissen man erlernt.

　a: Flexibler Container: Bezieht sich auf das Festlegen eines Elements auf Flex oder Inline-Box (Standardversion) über das Anzeigeattribut. Dieser Container ist ein flexibler Container.

b: Flex-Element: Ein Flex-Element ist ein untergeordnetes Element des Flex-Containers. Der Inhalt eines Flex-Containers enthält mehr als null Flex-Elemente – jedes untergeordnete Element des Flex-Containers wird zu einem Flex-Element (einschließlich Text, ein sogenanntes anonymes Flex-Element).

c: Teleskopströmungsrichtung: bezieht sich auf die Hauptachsenrichtung im Teleskopbehälter, die als Richtung der x-Achse verstanden werden kann. Die Richtung des skalierbaren Flusses wird hauptsächlich über das Flex-Direction-Attribut (Standardversion) festgelegt, und der Standardwert ist row.

d: Flex-Zeilenumbruch: Flex-Elemente laufen manchmal über den Flex-Container im Flex-Container hinaus. In den Flex-Container-Eigenschaften wird die Flex-Wrap-Eigenschaft hauptsächlich verwendet, um festzulegen, ob der Flex-Container umbrochen wird. Der Standardwert ist nowrap.

e: Skalierbarkeit: Durch die Definition eines Flex-Elements kann die Breite oder Höhe des Flex-Containers geändert werden, um den verfügbaren Platz auszufüllen. Sie können den Flex-Elementen in einem Flex-Container zusätzlichen Platz zuweisen oder sie verkleinern, um ein Überlaufen von Flex-Elementen zu verhindern.

2. Flexbox realisiert die horizontale und vertikale Mittenausrichtung

　

<span style="color: #800000;">html, body </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -moz-box-pack</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -webkit-box-pack</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.content </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
  text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -moz-box-pack</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -webkit-box-pack</span>:<span style="color: #0000ff;"> center</span>;
}

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>水平垂直居中对齐<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>　　

Stellen Sie zunächst die Breite und Höhe von HTML und Body auf 100 % ein, damit sie die gleiche Breite und Höhe haben. Ansonsten Ausrichtung der seitlichen Hauptachse (Box-Pack) und Ausrichtung der Seitenachse (Box-Align). lässt nicht zu, dass das skalierbare Projekt verwendet wird, bevor der zusätzliche Speicherplatz des Flex-Containers verteilt wird.

Machen Sie dann den Körper zu einem skalierbaren Container, setzen Sie das Anzeigeattribut auf Box, legen Sie Box-Pack und Box-Align fest, um die Ausrichtung der Hauptachse und der Seitenachse zu steuern, und setzen Sie deren Attributwerte auf Center.

Schließlich wird das .content-Element zu einem Flex-Container, sodass sein innerer Textblock zu einem anonymen Flex-Element wird. Derzeit ist das .content-Element sowohl ein skalierbarer Container als auch ein skalierbares Projekt. Bei Verwendung als skalierbarer Container ist das h1-Element sein skalierbares Element; bei Verwendung als skalierbares Element ist der Körper sein skalierbarer Container. Legen Sie außerdem box-align und box-pack für .content fest, um die Ausrichtung quer zur Achse und zur Hauptachse zu steuern.

Das Rendering ist wie folgt. Sowohl das .cotent-Element als auch h1 sind horizontal und vertikal in der Mitte ausgerichtet.

3. Drei Spalten gleicher Höhe sind adaptiv und der Fußzeilenbereich wird an das untere Layout geklebt

　Es gibt viele Methoden für das dreispaltige Layout, die durch Anpassen der Breite des Float-Prozentsatzes oder durch Verwendung von Inline-Block mit Prozentsatz erreicht werden können, aber es ist schwierig, die Sichtbarkeit der Fußzeilenhaftung im Browser zu erreichen . Layout am unteren Rand des Fensters. Hier stellen wir nur das CSS3-Layout mit drei Spalten und gleicher Höhe vor.

Ohne HTML-Struktur kann kein Layouteffekt erzielt werden.

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="header"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>头部<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="page"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>主内容<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="sidebar-left"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>左边栏<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="sidebar-right"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>右边栏<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="footer"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>页脚<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Angenommen, die Breite der Kopf- und Fußzeile beträgt 100 %, die Breite der linken und rechten Spalte beträgt 200 Pixel und der Hauptinhalt passt sich der Breite an.

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;
}<span style="color: #800000;">
#header, #footer </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #ccc</span>;
}<span style="color: #800000;">
#footer </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;
}<span style="color: #800000;">
#sidebar-left, #sidebar-right </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;
}

Wenn Sie hier die Boxgröße für den Körper festlegen, ist die Breite des Boxmodells = Inhaltsbreite und Randauffüllung, um zu vermeiden, dass beim Festlegen des Auffüllungswerts die Breite der Breite berechnet werden muss.

Als nächstes verwenden Sie das skalierbare Layout-Box-Modell box (die alte Version kann weiterhin verwendet werden), um das #page-Element zu einem skalierbaren Container zu machen. Legen Sie box-flex fest, um seine untergeordneten Elemente skalierbar und an den verbleibenden Platz des skalierbaren Containers anzupassen Container.

<span style="color: #800000;">#page </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;
}<span style="color: #800000;">
#main </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #e66</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;
}

　　上面代码中，使用为#page元素设置了display属性让其成为一个伸缩容器。这里要注意的是必须设置width。如果没有设置width，这里的#main元素的box-flex属性会失效，原因在于父容器没有宽度，自然无法填充伸缩容器的额外空间，（这里的额外空间指的是#page元素所占的面积，而不单单指宽度）。为#main元素设置box-flex属性是让其自适应伸缩容器的额外宽度。因为webkit内核的浏览器（Chrome，Safari）和Gecko内核（Firefox）不支持box-flex属性和box属性，所以必须添加厂商前缀。

　　上面实例中，需要修改一下主内容和左边栏，右边栏的排列方式，使用box-ordinal-group属性。

<span style="color: #800000;">#sidebar-right </span>{<span style="color: #ff0000;">
  -moz-box-ordinal-group</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
  -webkit-box-ordinal-group</span>:<span style="color: #0000ff;"> 3</span>;
}<span style="color: #800000;">
#main </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #e66</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -moz-box-ordinal-group</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-ordinal-group</span>:<span style="color: #0000ff;"> 2</span>;
}

　　上面代码中，使用了box-ordinal-group属性，这个属性是用于修改伸缩项目在伸缩容器中的显示顺序，默认值为1，也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。

　　至此，这个页面就已经做好了。但是出现了一个问题，就是页脚区域不会黏附在浏览器窗口可视区域底部，这让用户体验非常糟糕。

　　使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器，并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性（也就是#page元素）。也就是说，页脚区域前的div会变成一个伸缩项目，会根据伸缩容器的高度自适应填充伸缩容器的额外空间，也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。

　　如果希望整个页面的布局要和浏览器窗口可视区域一样高，

　　首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置，body本身就没有高度，当然伸缩项目的伸缩性也就无法体现。

<span style="color: #800000;">html, body </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 100%</span>;
}

　　其次，让body元素自身成为一个伸缩容器，并且设置伸缩流方向（box-orient）为vertical（旧版本中的属性）。

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}

　　最后，设置页脚区域前的div（#page元素）中的box-flex属性，让其根据伸缩容器（这里是指body）的高度自适应伸缩容器body的额外空间，也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。

<span style="color: #800000;">#page </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> stretch</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> stretch</span>;
}

　　上面代码中，#page元素本身是一个伸缩容器，现在变成伸缩项目。在伸缩布局盒模型中，伸缩项目在侧轴的对齐方式box-align（旧版本）默认值为stretch，（css中可不写box-align属性）致使#page元素的三个伸缩项目都会自动拉伸，不管内容高度有多少都具有伸缩容器#page的高度，从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。

　　

 

 

完。

 

 

感谢大家的阅读。