Detaillierte Erläuterung der display:flex||inline-flex-Eigenschaft in CSS-CSS-Tutorial-php.cn

Detaillierte Erläuterung der display:flex||inline-flex-Eigenschaft in CSS

巴扎黑

Freigeben： 2018-05-16 09:12:12

Original

16387 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!