Dieser Artikel führt Sie durch das Flex-Layout in CSS3, ich hoffe, er wird Ihnen hilfreich sein!
Einführung
Was ist Flex-Layout?
Flex ist die Abkürzung für Flexible Box, auch als flexibles Box-Layout bekannt.
Flex-Layout besteht aus:
- Flex-Container (
Flex-Container) - flex项（
flex items） - 主轴（
main axis） - 交叉轴（
cross axis）
flex container）
Flex布局的作用
在flex布局未出现前，网页布局的方式为标准流，浮动，定位等。在解决比较复杂的问题相对麻烦。【学习视频分享：css视频教程、web前端】
而flex布局可以：
- 自动弹性伸缩
- 更轻松地设计灵活的响应式布局结构
- 精确灵活控制块级盒子的布局方式
- 在pc端和移动端都适用
Flex容器（父元素）属性
在使用flex布局之前首先定义 Flex 容器。
display:flex;
定义 Flex 容器后可以使用相应的属性， 改变子元素的布局方式，让子元素可以自动的挤压或拉伸。
相应属性：
1. justify-content 主轴元素对齐方式 2. align-items 交叉轴元素对齐方式 3. flex-direction 设置主轴方向 4. flex-wrap 主轴一行满了换行 5. align-content 交叉轴行对齐方式 6. flex-flow 同时设置 flex-direction和 flex-wrap属性
1. justify-content
容器的justify-content属性可以设置子元素在主轴方向的对齐方式。（记得先display:flex;定义容器）
justify-content: center;//居中对齐
justify-content: space-between;//间距在子元素之间
justify-content: space-evenly;//主轴方向所有地方的间距都相等
justify-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
justify-content: space-around;
height: 200px;
margin: auto;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>2. align-items
容器的align-items属性可以设置子元素在交叉轴方向的对齐方式。
由此我们可以设置将容器属性justify-content和 align-items 设置为居中，让元素实现完美居中。
align-items: center;//居中
align-items: stretch;//拉伸,默认值(现有状态,这里测试去掉子级的高度)
align-items: flex-start;//将子元素在容器顶部对齐
align-items: flex-end;//将子元素在容器底部对齐
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交叉轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
display: flex;
/* 居中 */
/* align-items: center; */
/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
/* align-items: stretch; */
/* align-items: flex-start; */
align-items: flex-end;
height: 300px;
margin: auto;
border: 1px solid #000;
}
.father div {
/* 如果不设置宽，由内容撑开 */
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>3. flex-direction
容器的flex-direction属性可以改变flex布局的主轴方向。flex主轴方向默认为水平向右方向。如果修改主轴方向，那么交叉轴方向也会与之改变。
flex-direction: column;//主轴方向为垂直方向（从上到下）
flex-direction: column-reverse;//主轴方向为垂直方向（从下到上）
flex-direction: row;//主轴方向为水平方向（从左到右）
flex-direction: row-reverse;//主轴方向为水平方向（从右到左）
修改主轴方向后实现垂直居中：
display:flex; flex-direction: column; justify-content: center;
4. flex-wrap
当定义flex容器之后，如果子元素过多超出主轴方向宽度，容器内的子元素会自动伸缩。
如：
nbsp;html>
<meta>
<meta>
<meta>
<title>弹性盒子换行</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
height: 500px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
解决：容器的flex-wrap属性可以让超出容器主轴方向的子元素换行显示。
flex-wrap: nowrap;//默认值，不换行 flex-wrap: wrap;//换行，从上到下
flex-wrap: wrap-reverse;//换行，从下到上
5. align-content
容器的align-contentFlex-Elemente (Flex-Elemente)Hauptachse (Hauptachse)Querachse (Querachse)
🎜🎜🎜Die Rolle des Flex-Layouts🎜🎜🎜Bevor das Flex-Layout erschien, waren die Webseiten-Layoutmethoden Standardfluss, Floating und Positionierung , usw. Es ist relativ mühsam, komplexere Probleme zu lösen. [Teilen von Lernvideos: CSS-Video-Tutorial, web front-end]🎜🎜Und der flex Layout kann sein:🎜🎜 🎜Automatische elastische Skalierung🎜Einfaches Entwerfen flexibler, responsiver Layoutstrukturen🎜Präzises und flexibles Steuern des Layouts von Boxen auf Blockebene🎜Anwendbar sowohl auf PCs als auch auf mobilen Endgeräten 🎜🎜Eigenschaft des Flex-Containers (übergeordnetes Element)🎜🎜🎜🎜Definieren Sie zunächst den Flex-Container, bevor Sie das Flex-Layout verwenden. 🎜🎜align-content: center;//居中对齐 align-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起） align-content: space-between;//间距在子元素之间🎜Nachdem Sie den Flex-Container definiert haben, können Sie die entsprechenden Attribute verwenden, um das Layout der untergeordneten Elemente so zu ändern, dass die untergeordneten Elemente automatisch gestaucht oder gestreckt werden können. 🎜🎜Entsprechende Attribute: 🎜
align-content: stretch;拉伸,默认值(现有状态,这里测试去掉子级的高度)🎜🎜1. justify-content🎜🎜🎜Das
justify-content-Attribut des Containers kann die Ausrichtung von untergeordneten Elementen in der 🎜Hauptachsenrichtung🎜 festlegen. (Denken Sie daran, zuerst den Container mit display:flex; zu definieren.) .png " alt="Eine ausführliche Erklärung des Flex-Layouts in CSS3"/>🎜flex-flow: row wrap;🎜
🎜1. flex-grow 2. flex-shrink 3. flex-basis 4. flex 5. align-self 6. order🎜
🎜nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
/* 没有设置宽度 */
background:red;
flex-grow: 1;
}
.box2{
background:blue;
flex-grow: 2;
}
.box3{
background:orange;
flex-grow: 1;
}
</style>
<div>
<div></div>
<div></div>
<div></div>
</div>
🎜🎜 Code: 🎜nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
flex-shrink: 1;
}
.box2{
width: 100px;
background:blue;
flex-shrink: 2;
}
.box3{
width: 100px;
background:orange;
flex-shrink: 1;
}
</style>
<div>
<div></div>
<div></div>
<div></div>
</div>
🎜🎜2. align – Das Attribut align-items des Containers items🎜🎜🎜 kann die Ausrichtung von untergeordneten Elementen in der 🎜Querachsenrichtung🎜 festlegen. 🎜🎜🎜Daraus können wir die Containerattribute justify-content und align-items so einstellen, dass sie zentriert sind, sodass das Element perfekt zentriert ist. 🎜🎜flex: grow shrink basis;//顺序不能改变,默认值为0 1 auto;🎜
🎜nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
align-items: center;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 50px;
background:red;
align-self: flex-start;
}
.box2{
width: 100px;
height: 50px;
background:blue;
}
.box3{
width: 100px;
height: 50px;
background:orange;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
🎜🎜nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
order: 2;
}
.box2{
width: 100px;
background:blue;
order: 1;
}
.box3{
width: 100px;
background:orange;
order: 3;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
🎜🎜rrreee🎜🎜 Code: 🎜rrreee🎜🎜3. Eigenschaften von flex-direction🎜🎜🎜container flex-direction kann die Hauptachsenrichtung des Flex-Layouts ändern. Die Standardrichtung der flexiblen Spindel ist horizontal nach rechts. Wenn Sie die Richtung der Hauptachse ändern, ändert sich auch die Richtung der Querachse. 🎜rrreee🎜🎜rrreee🎜
🎜rrreee🎜
🎜rrreee🎜
🎜 Ändern Sie die Richtung der Hauptachse, um eine vertikale Zentrierung zu erreichen: 🎜rrreee🎜
🎜🎜🎜4. flex-wrap🎜🎜🎜Wenn der flex-Container definiert ist Wenn das untergeordnete Element zu viele Elemente enthält, die die Breite der Hauptachse überschreiten, werden die untergeordneten Elemente im Container automatisch erweitert und verkleinert. 🎜 Wie zum Beispiel: 🎜rrreee🎜🎜 Lösung: Container Das Attribut flex-wrap kann Unterelemente über die Hauptachse des Containers hinaus umbrechen. 🎜rrreee🎜
🎜🎜🎜5. content🎜🎜🎜containeralign-content kann die Ausrichtung von Unterelementzeilen anpassen (🎜Sie müssen zuerst den Zeilenumbruch festlegen🎜). 🎜align-content: center;//居中对齐 align-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起） align-content: space-between;//间距在子元素之间
前三者的属性跟主轴对齐方式一样就不再赘述。
align-content: stretch;拉伸,默认值(现有状态,这里测试去掉子级的高度)
6.flex-flow
flex-flow属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
flex-flow: row wrap;
Flex项（子元素）属性
我们可以设置相应属性让flex 容器的直接子元素成为弹性（flex）项目。（在使用flex布局之前首先定义 Flex 容器。）
相应属性：
1. flex-grow 2. flex-shrink 3. flex-basis 4. flex 5. align-self 6. order
1. flex-grow
使用flex-grow属性来定义弹性盒子内部子元素的放大比例（当所有子元素宽度之和小于父元素的宽度时子元素如何分配父元素的剩余空间）。
nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
/* 没有设置宽度 */
background:red;
flex-grow: 1;
}
.box2{
background:blue;
flex-grow: 2;
}
.box3{
background:orange;
flex-grow: 1;
}
</style>
<div>
<div></div>
<div></div>
<div></div>
</div>
2. flex-shrink
使用flex-shrink属性来定义弹性盒子内部子元素的缩小比例（当所有子元素宽度之和大于父元素的宽度时子元素如何缩小自己的宽度）。
nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
flex-shrink: 1;
}
.box2{
width: 100px;
background:blue;
flex-shrink: 2;
}
.box3{
width: 100px;
background:orange;
flex-shrink: 1;
}
</style>
<div>
<div></div>
<div></div>
<div></div>
</div>
3. flex-basis
使用flex-basis属性来设置子元素的宽度，默认值为auto（作用跟width一样,优先级比width高，就算width在后面也会显示flex-basis）。
4. flex
使用flex属性来同时设置flex-grow、flex-shrink、flex-basis这3个属性，flex属性就是一个复合属性。
实际应用一般用复合属性。
语法：
flex: grow shrink basis;//顺序不能改变,默认值为0 1 auto;
5. align-self
使用align-self属性设置子元素项目的对齐方式。
注意：align-self属性会覆盖容器的 align-items 属性所设置的对齐方式。
nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
align-items: center;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 50px;
background:red;
align-self: flex-start;
}
.box2{
width: 100px;
height: 50px;
background:blue;
}
.box3{
width: 100px;
height: 50px;
background:orange;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
6. order
使用order属性来定义子元素的排列顺序。
nbsp;html>
<meta>
<meta>
<meta>
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
order: 2;
}
.box2{
width: 100px;
background:blue;
order: 1;
}
.box3{
width: 100px;
background:orange;
order: 3;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung des Flex-Layouts in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
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
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
SublimeText3 Englische Version
Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!
