Heim > Artikel > Web-Frontend > CSS3-Flex-Wissen über das flexible Boxmodell
CSS3-Flex-Wissen über das flexible Boxmodell
- 一个新手Original
- 2017-10-12 10:38:431532Durchsuche
1. Was ist Flex?
Flex ist eine in CSS3 eingeführte Layoutmethode, die die Anordnung und Ausrichtung von Elementen sehr flexibel und effizient steuern kann. Layout.
2. Wie verwende ich Flex?
Jeder Container kann als Flex-Layout bezeichnet werden
1 #box {
2 display:flex;
3 }3 Grundlegende Terminologie
Elemente, die Flex-Layout verwenden, werden Flex-Container (Flex-Container) , seine untergeordneten Elemente sind Flex-Elemente (Flex-Items).
- Der Flex-Container enthält zwei zueinander senkrechte Achsen, nämlich
Die Hauptachse (Hauptachse). ) und Nebenachse (Querachse) .
- Flexelemente entlang der Hauptachse starten vom
Hauptstart (Hauptstart) Ordnen Sie der Reihe nach zum Hauptende (Hauptende)
Wenn der Flex-Container mehrere Reihen von Flex-Elementen enthält, dann - Flex-Leitungen
an Ordnen Sie der Reihe nach entlang der Sekundärachse vom Startpunkt der Sekundärachse (Kreuzanfang) bis zum Endpunkt der Sekundärachse (Kreuzende)
an einzeln Der vom Flexelement eingenommene Hauptachsenraum wird als Hauptgröße (Hauptgröße) - bezeichnet, und der belegte Nebenachsenraum wird als
Nebenachsenlänge (Kreuzgröße) bezeichnet.
4. Im übergeordneten Container sind sechs Attribute festgelegt, um den Anzeigemodus von untergeordneten Elementen zu steuern:
| Attribut | Bedeutung
|
|---|---|
Flex-Richtung |
Hauptachsenrichtung |
flex-wrap |
Zeilenumbruchstil |
flex-flow |
Abkürzung der ersten beiden |
justify-content |
Ausrichtung der Hauptachse |
align-items |
Einzeilige Ausrichtung der Sekundärachse |
align-content |
Mehrere Zeilen der sekundären Achsenausrichtungsmethode |
五、flex-direction，设置主轴的对齐方向，有四个值:
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
<!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布局 - by ghostwu</title>
<style>
#box {
display: flex;
flex-direction: row;
}
#box p {
width: 100px;
height: 100px;
background: #09f;
margin: 10px;
}
</style>
</head>
<body>
<p id="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
</p>
</body>
</html>flex-direction设置为row：
flex-direction设置为row-reverse
flex-direction设置为column，下面的示意图我只截取了前面5个p,后面如果截取的话，图片占的位置太多了，影响体验.
flex-direction设置为column-reverse:
六、flex-wrap ：定义子元素超过一行，如何换行，常用属性值:
nowrap（默认值）：默认不换行。
wrap：换行，第二行在第一行下面，从左到右
wrap-reverse：换行，第二行在第一行上面，从左到右
1 #box {
2 display: flex;
3 flex-direction: row;
4 flex-wrap: nowrap;
5 }flex-wrap:nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
七、flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row nowrap
#box {
display:flex;
/* flex-flow: row nowrap; */
/* flex-flow: row wrap; */
/* flex-flow: row wrap-reverse; */
/* flex-flow: row-reverse wrap-reverse; */
flex-flow: column wrap;
}八、 justify-content: 子元素在主轴对齐方式
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。
#box {
display:flex;
flex-flow: row wrap;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
justify-content: space-around;
}这里主要搞清楚space-between和space-around的区别
justify-content: space-between;
justify-content: space-around;
Das obige ist der detaillierte Inhalt vonCSS3-Flex-Wissen über das flexible Boxmodell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!