フレックスボックスの子要素を親の高さの 100% を埋めるようにするにはどうすればよいですか?

フレックスボックスの子の高さ: 親の 100% フィルの達成

フレックスボックスの世界では、子要素の垂直方向のスペースを埋めることが共通の課題となります。提供したコード スニペットを考えてみましょう:

.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;
}

このシナリオでは、flex-2 の高さが 100 の場合を除き、flex-2-child 要素は親コンテナーの垂直方向のスペース全体を占有することができません。 % または flex-2-child に絶対位置がある場合。ただし、どちらの解決策にもそれぞれ欠点があります。

解決策: Align-Items Stretch

効果的な回避策の 1 つは、親コンテナで align-items プロパティを使用することです ( flex-2):

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

高さは 100% であることに注意してください。プロパティは子コンポーネント (flex-2-child) から削除する必要があります。

このアプローチは、flex-2-child 要素を垂直方向に拡張し、親コンテナー内の使用可能なスペースを埋めるように指示します。これは Chrome と Firefox の両方で動作します。

align-items の代わりに、ストレッチしたい flex-2-child 要素に align-self を適用できます。

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

いずれかの手法を利用すると、Flexbox の子が親要素の高さ全体を埋めるという望ましい動作を実現できます。

以上がフレックスボックスの子要素を親の高さの 100% を埋めるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。