Flexbox は水平スペースと同じように残りの垂直スペースを埋めることができますか?

垂直方向のフレックスボックススペース充填の実装

問題:

フレックスボックス行内で、特定の要素を指定することができます。 flex プロパティを使用して、利用可能な水平スペースを埋めます。ただし、スペースを埋めるために指定された要素に高さが足りないため、同じ動作を垂直方向に実現するのは困難であることがわかっています。

質問:

フレックスボックスを利用して次のことを行う方法はありますか?フレックスボックスで行う方法と同様に、コンテンツ要素でフレックスボックス列内の残りの垂直スペースを埋めることができます。 row?

答え:

はい、次の 2 つの変更を適用します:

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

これらの手法を適用すると、指定した要素がフレックス コンテナの下部まで拡張され、利用可能な垂直スペースを効果的に埋めることができます。

例:

次のコード スニペットを考えてみましょう。このアプローチをどのように実装できるかを示しています。練習:

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

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

親コンテナに flex-direction: 列を設定し、目的の要素に flex: 1 を設定することで、意図したとおりに垂直方向のスペースを満たすフレックスボックス レイアウトを効果的に作成します。

このアプローチにより、絶対位置決めの必要性がなくなり、フレックスボックス レイアウトの垂直スペースを埋めるためのより洗練された柔軟なソリューションが提供されます。

以上がFlexbox は水平スペースと同じように残りの垂直スペースを埋めることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。