コンテンツに基づいて CSS flex の高さを変更する方法

CSS flex を実装してコンテンツに応じて高さを変更する方法: 最初に HTML サンプル ファイルを作成し、次にいくつかの div とテキスト コンテンツを作成し、最後に「align-items:baseline;」によって高さを変更します。属性。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

Flexbox は CSS3 から追加されたレイアウト モジュールで、特に列とレイアウトに使用されます。この記事では、CSS flex を使用してコンテンツに応じて高さを変更する方法を説明します。

早速、本題に入りましょう~

flex の内容に応じて高さを変更する方法

デフォルトの 1 つフレックスボックスの特徴は列ごとに高さを変更することです。すべて高さを設定します。

図に示すように、

#高さの変更を実現できる属性があります。それは、適用される部分の align-items:baseline; です。表示を指定することです: flex の親要素;

具体的な例を見てみましょう

コードは次のとおりです:

HTML

<div class="container">
  <div class="box"><p>文字内容</p></div>
  <div class="box"><p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字</p></div>
  <div class="box"><p>文字内容</p></div>
  <div class="box"><p>文字内容</p></div>
  <div class="box"><p>文字内容</p></div>
</div>

CSS

## ブラウザに表示される #

.container{
  display: flex;
  background: #ccc;
  flex-wrap: wrap;
  align-items: baseline;
}
.box{
  width: 200px;
  margin: 10px;
  background-color: #66b6d5;
}

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

この記事はここで終了です。さらに学習するには、PHP 中国語 Web サイトの

CSS3 ビデオ チュートリアル

の関連する興味深いコンテンツに注目してください。

以上がコンテンツに基づいて CSS flex の高さを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。