Flexbox 要素を垂直方向の利用可能なスペースに埋めるにはどうすればよいですか?

フレックスボックス: 利用可能な垂直スペースを埋める

水平方向のフレックスボックス行では、要素の「flex」プロパティを使用すると要素を拡張でき、利用可能な水平方向のスペースを埋めます。同様の効果を垂直方向に実現したい場合はどうすればよいでしょうか?

課題は、垂直方向の要素を拡張して残りのスペースを埋め、他の要素を垂直方向に積み重ねることができるようにすることです。これに対処するには、次のフレックスボックス プロパティを使用できます:

• flex-direction: フレックス コンテナーの列は、要素を水平ではなく垂直に配置します。
• flex: 1 残りのスペースを埋める必要がある要素を拡張して残りのスペースを占有することができますheight.

次の例を考えてみましょう:

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

この設定では、.row コンテナは、高さ 100vh を使用してブラウザ ビューポートの高さを固定しています。 .flex 要素の flex: 1 は、拡張されて残りの垂直スペースを埋めます。その結果、他の 2 つの要素は .row コンテナ内で垂直に積み重ねられます。

以上がFlexbox 要素を垂直方向の利用可能なスペースに埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。