Ausführliche Erklärung, wie CSS3 flexibles Layout implementiert
1. CSS3 Flexible Box
Flexible Box ist ein neuer Layoutmodus von CSS3.
CSS3 Flexible Box (Flexible Box oder Flexbox) ist eine Layoutmethode, die sicherstellt, dass Elemente ein angemessenes Verhalten aufweisen, wenn die Seite an verschiedene Bildschirmgrößen und Gerätetypen angepasst werden muss.
Der Zweck der Einführung des Flexbox-Layoutmodells besteht darin, eine effizientere Möglichkeit zum Anordnen, Ausrichten und Zuweisen von leerem Raum zu Unterelementen in einem Container bereitzustellen.
2. Browser-Unterstützung
Die Nummer in der Tabelle gibt die Versionsnummer des ersten Browsers an, der dieses Attribut unterstützt.
Das -webkit- oder -moz- direkt nach der Nummer ist das Präfix des angegebenen Browsers.
| 属性 |  |
|
|
 |
|
| Basic support (single-line flexbox) | 29.0 21.0 -webkit- | 11.0 | 22.0 18.0 -moz- | 6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
3. Inhalt der flexiblen CSS3-Box
Die flexible Box besteht aus einem Flex-Container und einer Flex-Artikelzusammensetzung.
Ein flexibler Container wird als flexibler Container definiert, indem der Wert der Anzeigeeigenschaft auf Flex oder Inline-Flex gesetzt wird.
Ein Flex-Container enthält ein oder mehrere untergeordnete Flex-Elemente.
Hinweis: Die Außenseite des flexiblen Containers und die Innenseite des flexiblen Unterelements werden normal gerendert. Die Flex-Box definiert nur, wie die untergeordneten Flex-Elemente innerhalb des Flex-Containers angeordnet sind.
Flexible untergeordnete Elemente werden normalerweise in einer Reihe innerhalb der Flexbox angezeigt. Standardmäßig gibt es nur eine Zeile pro Container.
Die folgenden Elemente zeigen die elastischen untergeordneten Elemente, die in einer Reihe von links nach rechts angezeigt werden:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FLEX</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 1200px;
height: 640px;
background-color: lightsteelblue;
}
.flex-container .flex-item {
width: 320px;
height: 240px;
margin: 10px;
background-color:lightsalmon;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
4. CSS3 Flexible Box Gemeinsame Attribute
| 属性 | 描述 |
|---|---|
| flex-direction | 指定弹性容器中子元素排列方式 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式 |
1. flex-direction 属性
决定项目的方向。
注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。
.flex-container { flex-direction: row | row-reverse | column | column-reverse; }
属性值
| 值 | 描述 |
|---|---|
| row | 默认值。元素将水平显示，正如一个行一样。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 |
| column | 元素将垂直显示，正如一个列一样。 |
| column-reverse | 与 column 相同，但是以相反的顺序。 |
2. flex-wrap 属性
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定元素不拆行或不拆列。 |
| wrap | 规定元素在必要的时候拆行或拆列。 |
| wrap-reverse | 规定元素在必要的时候拆行或拆列，但是以相反的顺序。 |
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }可以取三个值：
（1） nowrap (默认)：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
3. flex-flow 属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.flex-container { flex-flow: <flex-direction> <flex-wrap> }4. align-items属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| baseline | 项目位于容器的基线上。 |
5. justify-content属性
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
五、弹性子元素属性
| 属性 | 描述 |
|---|---|
| order | 设置弹性盒子的子元素排列顺序。 |
| flex-grow | 设置或检索弹性盒子元素的扩展比率。 |
| flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 |
| flex-basis | 用于设置或检索弹性盒伸缩基准值。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
1. order属性
.flex-container .flex-item { order: <integer>; }
2. flex-grow属性
.flex-container .flex-item { flex-grow: <integer>; }
3. flex-shrink属性
.flex-container .flex-item { flex-shrink: <integer>; }
4. flex-basis属性
.flex-container .flex-item { flex-basis: <integer> | auto; }auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。
5. flex属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
.flex-container .flex-item {
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
}| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他元素进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他元素进行收缩的量。 |
| flex-basis | 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |
| initial | 设置该属性为它的默认值，即为 0 1 auto。 |
| inherit | 从父元素继承该属性。 |
6. align-self属性
.flex-container .flex-item {
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
}| 值 | 描述 |
|---|---|
| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 |
| stretch | 元素被拉伸以适应容器。 |
| center | 元素位于容器的中心。 |
| flex-start | 元素位于容器的开头。 |
| flex-end | 元素位于容器的结尾。 |
| baseline | 元素位于容器的基线上。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
取值同 align-items。
参考
本文转载自：https://www.jianshu.com/p/5856c4ae91f2
相关推荐：CSS视频教程
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie CSS3 flexibles Layout implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Tipps zur Optimierung von CSS-Layouteigenschaften: Position Sticky und Flexbox
Oct 20, 2023 pm 03:15 PM
Tipps zur Optimierung von CSS-Layoutattributen: Positionsticky und Flexbox In der Webentwicklung ist das Layout ein sehr wichtiger Aspekt. Eine gute Layoutstruktur kann das Benutzererlebnis verbessern und die Seite schöner und einfacher zu navigieren machen. CSS-Layouteigenschaften sind der Schlüssel zum Erreichen dieses Ziels. In diesem Artikel werde ich zwei häufig verwendete Techniken zur Optimierung von CSS-Layouteigenschaften vorstellen: Positionsticky und Flexbox, und spezifische Codebeispiele bereitstellen. 1. Positionen
Flexible Einsatzfähigkeiten des Positionsattributs in H5
Dec 27, 2023 pm 01:05 PM
So nutzen Sie das Positionsattribut in H5 flexibel: Bei der H5-Entwicklung spielen häufig die Positionierung und das Layout von Elementen eine Rolle. Zu diesem Zeitpunkt kommt die CSS-Positionseigenschaft ins Spiel. Das Positionsattribut kann die Positionierung von Elementen auf der Seite steuern, einschließlich relativer Positionierung, absoluter Positionierung, fester Positionierung und fester Positionierung. In diesem Artikel wird detailliert beschrieben, wie das Positionsattribut in der H5-Entwicklung flexibel verwendet werden kann.
So zentrieren Sie ein Div in HTML
Apr 05, 2024 am 09:00 AM
Es gibt zwei Möglichkeiten, ein Div in HTML zu zentrieren: Verwenden Sie das text-align-Attribut (text-align: center): Für einfachere Layouts. Flexibles Layout verwenden (Flexbox): Bieten Sie eine flexiblere Layoutsteuerung. Die Schritte umfassen: Aktivieren von Flexbox (Anzeige: Flex) im übergeordneten Element. Legen Sie das Div als Flex-Element fest (Flex: 1). Verwenden Sie die Eigenschaften align-items und justify-content für die vertikale und horizontale Zentrierung.
So verwenden Sie das CSS Flex-Layout, um ein Spaltenlayout mit gleicher Höhe zu erreichen
Sep 27, 2023 pm 03:17 PM
So verwenden Sie CSS Flexible Layout, um ein Spaltenlayout gleicher Höhe zu implementieren. CSS Flexible Box Layout (CSS FlexibleBox Layout), auch Flex-Layout genannt, ist ein Modul, das für das Seitenlayout verwendet wird. Das Flex-Layout erleichtert uns die Implementierung gleichhoher Spaltenlayouts, sodass diese unabhängig von der Höhe des Inhalts in gleicher Höhe angezeigt werden können. In diesem Artikel stellen wir vor, wie Sie das CSSFlex-Layout verwenden, um ein Spaltenlayout mit gleicher Höhe zu erreichen. Nachfolgend finden Sie spezifische Codebeispiele. HTML-Struktur: &
So implementieren Sie ein unregelmäßiges Rasterlayout mithilfe des CSS-Flex-Layouts
Sep 28, 2023 pm 09:49 PM
So implementieren Sie ein unregelmäßiges Rasterlayout mithilfe des elastischen CSSFlex-Layouts. Im Webdesign ist es häufig erforderlich, ein Rasterlayout zu verwenden, um eine regelmäßige Seitenaufteilung zu erreichen, und manchmal muss jedes Raster gleich groß sein einige unregelmäßige Rasteranordnung. Das elastische CSSFlex-Layout ist eine leistungsstarke Layoutmethode, mit der verschiedene Rasterlayouts, einschließlich unregelmäßiger Rasterlayouts, problemlos implementiert werden können. Im Folgenden stellen wir vor, wie Sie mit dem elastischen CSSFlex-Layout unterschiedliche Ergebnisse erzielen
Eine Anleitung zu den flexiblen CSS-Layouteigenschaften: Position Sticky und Flexbox
Oct 27, 2023 am 10:06 AM
Ein Leitfaden zu CSS-Eigenschaften für flexible Layouts: Positionsticky und Flexbox Flexibles Layout ist zu einer sehr beliebten und nützlichen Technik im modernen Webdesign geworden. Es kann uns dabei helfen, adaptive Webseitenlayouts zu erstellen, damit Webseiten auf verschiedenen Geräten und Bildschirmgrößen gut angezeigt und reagiert werden können. Dieser Artikel konzentriert sich auf zwei flexible Layouteigenschaften: position:sticky und flexbox. Wir werden ihre Verwendung im Detail mit konkreten Codebeispielen besprechen
HTML-Tutorial: So verwenden Sie Flexbox für ein adaptives Layout mit gleicher Höhe, gleicher Breite und gleichem Abstand
Oct 27, 2023 pm 05:51 PM
HTML-Tutorial: So verwenden Sie Flexbox für ein adaptives Layout mit gleicher Höhe, gleicher Breite und gleichem Abstand. Einführung: Im modernen Webdesign ist das Layout ein sehr wichtiger Faktor. Bei Seiten, die eine große Menge an Inhalten anzeigen müssen, ist es wichtig, die Position und Größe der Elemente sinnvoll anzuordnen, um eine gute Sichtbarkeit und Benutzerfreundlichkeit zu erreichen. Flexbox (Flexible Box Layout) ist ein sehr leistungsstarkes Tool, mit dem verschiedene flexible Layoutanforderungen einfach realisiert werden können. In diesem Artikel wird Flexbox im Detail vorgestellt
So verwenden Sie das CSS Flex-Layout, um das Wasserfall-Flow-Layout zu implementieren
Sep 27, 2023 pm 04:22 PM
So verwenden Sie das elastische CSSFlex-Layout zur Implementierung des Wasserfall-Flow-Layouts Mit der kontinuierlichen Weiterentwicklung des Webdesigns ist das Wasserfall-Flow-Layout zu einer sehr beliebten Seitenlayoutmethode geworden. Im Gegensatz zum herkömmlichen Rasterlayout kann das Wasserfall-Flow-Layout an die Bildschirmgröße angepasst werden und vermittelt ein einzigartiges Strömungsgefühl. In diesem Artikel stellen wir die Verwendung des elastischen CSSFlex-Layouts zur Implementierung des Wasserfall-Flow-Layouts vor und stellen spezifische Codebeispiele bereit. Das elastische CSSFlex-Layout ist ein leistungsstarkes Layoutmodell, das di anwendet
