Bootstrap 4 の Flexbox Grid は石積みレイアウトを作成できますか?

組積造レイアウトに Bootstrap 4 フレックスボックス グリッドを使用する

Bootstrap 4 は、列レイアウトにフレックスボックス グリッド システムを利用します。ただし、一部のユーザーは、このフレックスボックス グリッドを使用して、柱の高さが異なる石積みレイアウトを作成できるのではないかと疑問に思うかもしれません。

答えは「はい」です。標準の Bootstrap 4 クラスで実現可能です。ドキュメントには、この機能を有効にするカード列に関する専用セクションが含まれています。

カード列機能

Bootstrap 4 ドキュメントに記載されているとおり:

"カードを .card-columns でラップすることで、CSS だけでメイソンリーのような列に編成できます。カードは CSS 列プロパティで構築されます。配置を容易にするため、フレックスボックスの代わりに、カードは上から下、左から右の順に並べられます。

実装

カード列機能を使用するには、 をラップするだけです。カードを .card-columns に入れる

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

考慮事項

カード列の使用は、すべての状況で理想的であるわけではないことに留意してください。カードが列をまたいで分割されないようにするには、カードの表示プロパティを inline-block に設定することをお勧めします。ただし、column-break-inside:avoid CSS プロパティはまだ完全に信頼できるソリューションではありません。

以上がBootstrap 4 の Flexbox Grid は石積みレイアウトを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。