フレックスボックスレイアウトの最後の行を左揃えにする方法は?

Flexbox の最後の行を左に揃える

Flexbox は、多彩なコンテンツ配置を可能にする強力なレイアウト ツールです。ただし、複数行のフレックスボックスを扱う場合、位置合わせを維持するのが困難になる場合があります。この記事では、フレックスボックスの最後の行/行を左揃えにして、一貫したグリッドのようなレイアウトを確保する問題について説明します。

この問題は、最後の行に他の行と同じ数の要素が含まれていない場合に発生します。センタリングを引き起こし、グリッド効果を破壊します。これに対処するために、戦略的に配置された空のスペース充填要素を使用するソリューションが提案されています。

HTML で、クラス「filling-empty-space-childs」を持つ 3 つの空の div を作成します。これらの要素の幅は子要素の幅と同じで、高さは 0 である必要があります。これらの要素は、最後の行を左に揃える際に重要な役割を果たします。

フレックスボックス コンテナには次のプロパティが必要です。

• display:flex
• flex-wrap:wrap
• justify-content:space-around

の数に応じて要素が最後の行にある場合、空のスペースを埋める要素は新しい行で折りたたまれ、非表示のままになり、最後の行が左揃えのままになります。

例を示します:

<code class="html"><div class="container">
  <div class="item"></div>
  <div class="item"></div>
  ...
  <div class="item"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
</div></code>

<code class="css">.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.item {
  width: 130px;
  height: 180px;
  background: red;
  margin: 0 1% 24px;
}

.filling-empty-space-childs {
  width: 130px;
  height: 0;
}</code>

この手法を実装すると、最後の行/行が左揃えになり、他の行と異なる数の要素が含まれている場合でも、目的のグリッド効果が維持されます。

以上がフレックスボックスレイアウトの最後の行を左揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。