Heim > Artikel > Web-Frontend > 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:1216320Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS-Methode zur Lösung der Lücke, die durch display:inline-block;Nächster Artikel：CSS-Methode zur Lösung der Lücke, die durch display:inline-block;

In Verbindung stehende Artikel

Mehr sehen