柔軟なレイアウトをマスターする: レスポンシブ デザインのための CSS フレックスボックス VS グリッド

この投稿では、CSS フレックスボックスとグリッドを使用して、応答性の高い水平方向に分散されたカードのリストを作成するためのさまざまな方法を検討します。 私たちは、さまざまな画面サイズにわたって一貫したカード サイズと間隔を維持するという課題に取り組んでいきます。

目次

• 目次
• チャレンジ
• CSS フレックスボックス: 柔軟なカード リスト
• flex-growとflex-basis
による均等なカード配布
• CSS グリッド: レスポンシブなソリューション
• 概要

チャレンジ

ギャラリーやリストのコンポーネントでは、多くの場合、コンテナの幅に合わせてカード (記事、製品、画像) を必要とします。 各カードのサイズは、同じ高さ、幅、間隔を維持しながら、比例して変更する必要があります。 レイアウトは、さまざまな画面サイズにわたってシームレスにリフローする必要があります。

基本的な HTML 構造と最小限の CSS では、最初はカードの分布が不均一になる可能性があります。

CSS フレックスボックス: 柔軟なカードリスト

Flexbox は簡単なアプローチを提供します。 flex-wrap: wrap は新しい行への折り返しを有効にし、gap は間隔を制御します:

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

これにより、水平方向の流れが生成されます:

ただし、.item (width: 100px;) に固定幅を設定すると、カードが利用可能なスペースを満たすまで拡張できず、隙間が残ります:

justify-content プロパティ (space-between、space-around など) を使用しても、均等分布の問題は完全には解決されません:

flex-growとflex-basis

による均等なカード配布

flex-basis は初期カード サイズを設定しますが、flex-grow: 1 (または flex: 1) は比例した増加を可能にします:

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

これにより分散が改善されますが、最後のカードが不均一に展開される可能性があります:

CSS グリッド: レスポンシブなソリューション

CSS グリッドは、より堅牢なソリューションを提供します。 display: grid と gap は、Flexbox と同様に使用されます。

<code class="language-css">.list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}</code>

応答性を高めるには、grid-template-columns、auto-fit、minmax() を含む repeat() が重要です:

<code class="language-css">.item {
  /* other styles */
  flex: 1;
  flex-basis: 100px;
}</code>

これにより、完全に応答性の高いレイアウトが作成されます:

概要

Flexbox と Grid はどちらも強力なレイアウト機能を提供します。 Flexbox は 1 次元のレイアウトに優れていますが、Grid は 2 次元のコントロールに適しています。 適切なツールの選択は、特定の設計要件によって異なります。

コーディングを楽しんでください! ?

? 私の新しい本『Learning Vue』で Vue 3 と TypeScript について学びましょう!

? X で私とつながりましょう | LinkedIn.

この投稿が好きですか?共有する！ ?? ?

以上が柔軟なレイアウトをマスターする: レスポンシブ デザインのための CSS フレックスボックス VS グリッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。