ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSのdisplay:flex||inline-flexプロパティの詳しい説明

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

巴扎黑
巴扎黑オリジナル
2018-05-16 09:12:1216400ブラウズ

この記事では主に、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。