Heim >Web-Frontend >CSS-Tutorial >Detaillierte Erläuterung der display:flex||inline-flex-Eigenschaft in CSS
Detaillierte Erläuterung der display:flex||inline-flex-Eigenschaft in CSS
- 巴扎黑Original
- 2018-05-16 09:12:1216400Durchsuche
Dieser Artikel führt Sie hauptsächlich in die Eigenschaften display:flex und display:inline-flex in CSS ein. Der Artikel stellt Ihnen die Verwendungseffekte von display:flex und display:inline-flex anhand von zwei Beispielcodes vor darauf verweisen kann, werfen wir einen Blick unten.
Einführung
Flex ist die Abkürzung für Flexible Box, was „elastisches Layout“ bedeutet und verwendet wird, um maximale Flexibilität bei kastenförmigen Formen zu gewährleisten Modelle. Jeder Container kann als Flex-Layout festgelegt werden.
flex: Zeigt das Objekt als Flexbox an
inline-flex: Zeigt das Objekt als Inline-Flexbox auf Blockebene an
Flex-Beispielcode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
width:200px;
background-color: red;
display: flex;/*父p设置该属性*/
}
.main>p{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>Das Rendering ist wie folgt:
display:inline-flex-Beispielcode
Wenn Sie den Effekt sehen möchten, ersetzen Sie das obige display:flex durch display: inline-flex und delete width:200px. Vor dem Test denken manche Leute vielleicht, dass .main die gesamte Zeile einnimmt. Das Testergebnis ist jedoch, dass es die Breite und Höhe entsprechend der p-Größe aller Unterelemente anpasst
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
background-color: red;
display: inline-flex;/*父p设置该属性*/
}
.main>p{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>Die Darstellung ist wie folgt:
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der display:flex||inline-flex-Eigenschaft in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!