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

フレックスボックス: 垂直方向のスペースを効果的に埋める

フレックスボックスの行では、flex プロパティを利用して、利用可能な水平方向のスペースを子に分配することができます。要素。ただし、この概念を垂直方向に拡張すると課題が生じます。

問題: 垂直方向のスペースを埋める

垂直方向の Flexbox レイアウトでは、典型的なジレンマは、必要な子要素が存在しないことです。残りのスペースを埋めるには、高さが定義されていないため、要素が上下に表示されます。

解決策: Flexbox を使用してコンテンツを垂直に整列する

これに対処するには、次のアプローチを試してください:

1. flex-direction: column: このプロパティを親に設定しますFlexbox コンテナ。
2. flex: 1: この値を割り当てます垂直方向のスペースを埋める子要素に追加します。

例:

次の Flexbox レイアウトを考えてみましょう:

<div>
<p>そして関連する CSS:</p>
<pre class="brush:php;toolbar:false">.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}

このレイアウトにより、「.flex」要素が確実に親「.row」コンテナ内の残りの垂直スペースを占有し、高さは 100vh (ビューポートの高さ) に固定されています。