CSS の flex と inline-flex の違いの詳細な説明

inline-flex は inline-block と同じです。内部要素用の display:flex コンテナであり、外部要素用のインラインブロックです。

両者の違いの説明:

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

一言で言えば、Flex Box コンテナーに幅のサイズ制限が設定されていない場合、display が flex として指定されると、FlexBox の幅が親コンテナーを埋め尽くし、display が inline-flex として指定されると、FlexBox の幅が子アイテムを囲みます (次の図を参照)。

対応するコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>

  <スタイル>

    /*フレックスコンテナ*/
    .flex__コンテナ{
      ディスプレイ: インラインフレックス;
      背景色: グレー;
    }

    /*フレックスサブアイテム */
    .flex__item {
      幅: 50px;
      高さ: 50px;

      背景色: 水色;
      境界線: 1px 黒一色;
    }

  </スタイル>
</head>
<本文>

<!--フレックスコンテナ-->
<div class="flex__container">

  <!--Flex コンテナ内のサブアイテム-->
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

</本文>
</html>

CSS の flex と inline-flex の違いに関するこの記事はこれで終わりです。CSS flex と inline-flex の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQLトリガーの使用

>>: Vueのウォッチリスナーの使い方を説明する記事