Flexbox を使用してスペースを垂直に分配するにはどうすればよいですか?

垂直フレックスボックス スペースの配分

行内のフレックスボックス レイアウトを扱う場合、利用可能なスペースを埋めるのは簡単です。要素に flex: 1 を使用して、残りのスペースを消費する必要があることを示すことができます。ただし、これを垂直方向に実現するのは少し難しい場合があります。

垂直フレックスボックス

垂直方向のスペース分散を実現するには、次の手順を検討してください。

1. 親コンテナのフレックスボックスを設定します。
2. 残りのスペースを要素で埋めるには、要素に flex を割り当てます。 1.

例

コードのデモは次のとおりです。

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>

この例では、中央の要素の flex クラスは、次のことを示しています。垂直列の残りのスペースを占め、他の要素を上下に押し込みます。

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