CSSのdisplay:flex||inline-flexプロパティの詳しい説明-CSSチュートリアル-php.cn

CSSのdisplay:flex||inline-flexプロパティの詳しい説明

巴扎黑

リリース： 2018-05-16 09:12:12

オリジナル

16372 人が閲覧しました

この記事では主に、CSS の display:flex プロパティと display:inline-flex プロパティについて紹介します。この記事では、2 つのサンプルコードを通じて、display:flex と display:inline-flex の使用効果を紹介します。参照できますので、以下を見てみましょう。

はじめに

FlexとはFlexible Boxの略で、「柔軟なレイアウト」を意味し、箱型のモデルに最大限の柔軟性を提供するために使用されます。任意のコンテナを Flex レイアウトとして指定できます。

flex: オブジェクトをフレキシブルボックスとして表示します

inline-flex: オブジェクトをインラインブロックレベルのフレキシブルボックスとして表示します

flexサンプルコード

<!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>

ログイン後にコピー

レンダリングは次のとおりです:

display:inline-flexサンプルコード

効果を確認したい場合は、上記のdisplay:flexをdisplay:inline-flexに置き換えて、width:200pxを削除してください。テストする前は、.main が行全体を占めるのではないかと思う人もいるかもしれませんが、テストの結果は、すべてのサブ要素の p サイズに応じて幅と高さが調整されるということです

<!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>

ログイン後にコピー

効果の図は次のとおりです。 :

以上がCSSのdisplay:flex||inline-flexプロパティの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。