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

Flexbox の子が親の高さ全体を占める

Flexbox レイアウトでは、デフォルトでは、子要素が親の高さ全体を占めることはありません容器。これは、一貫した垂直方向の配置を作成しようとする場合に問題となる可能性があります。

問題: .flex-2 内の .flex-2-child が高さを埋めることを目的としている次の例を考えてみましょう。その親:

.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-child は高さを完全に占有しません。

回避策 1: align-items:stretch:

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

この解決策は、flex 項目の配置を変更し、flex-2-child を引き伸ばして埋めることができるようにします。利用可能な高さ。

回避策 2: align-self:

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

この代替ソリューションは、子要素に位置合わせを直接適用し、親フレックス項目の高さを確実に埋めます。

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