要素をフレックスボックス内の利用可能なスペースを垂直に埋めるにはどうすればよいですか?

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

フレックスボックスの行で、要素にフレックスを使用すると、要素が拡張されて残りの利用可能なスペースを埋めることができます。ここで、疑問が生じます: この動作を垂直方向に複製できますか?

説明したシナリオでは、コンテナーに固定高さ。要素を一番下に絶対的に配置する場合: 0;は実行可能な解決策であり、望ましい結果はフレックスボックスを使用して求められます。

これを実現するには:

1. フレックス コンテナの flex-direction: 列を設定します。
2. 割り当てflex: 1 を残りのスペースを占める要素に指定します。

ここにありますデモ:

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

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

この例では、flex: 1 の flexbox 要素が、必要に応じて親コンテナの垂直方向のスペース全体を埋めます。

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