Flexbox の子が親コンテナの高さ全体を占めるようにするにはどうすればよいですか?

Flexbox の子を親と同じ高さにする方法

Flexbox を使用する場合、子要素が親コンテナの垂直方向のスペース全体を埋めるという問題に遭遇することがあります。 。これは、子要素を親の高さの 100% にしたい場合に特にイライラする可能性があります。

Flexbox 親コンテナのセットアップ

これは、 HTMLとCSSコード:

HTML:

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

CSS:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

解決策: align-items:stretch

絶対位置決めや flex-2 要素の高さの設定に頼らずにこの問題を解決するには100% に設定すると、親コンテナ flex-2 の align-items:stretch プロパティを使用できます。

.flex-2 {
  display: flex;
  align-items: stretch;
}

Height プロパティに関する注意

です。 flex-2-child 要素から height: 100% プロパティを削除することが重要です。これにより、子要素が親コンテナ内で垂直に伸びるようになります。

代替: align-self

別のオプションは、align-self:stretch on を使用することです。高さを埋める特定の子要素。

.flex-2-child {
  align-self: stretch;
}

このメソッドを使用すると、個々の子要素をより詳細に制御できます。子要素。

以上がFlexbox の子が親コンテナの高さ全体を占めるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。