CSS アダプティブ レイアウト プロパティのガイド: フレックスとグリッド

CSS アダプティブ レイアウト プロパティ ガイド: フレックスとグリッド

はじめに:
現代の Web 開発において、レスポンシブ デザインはトレンドを無視できないデザインになっています。さまざまな画面サイズやデバイス タイプに対応するために、CSS には多数のレイアウト プロパティが用意されており、そのうち最も一般的に使用される 2 つはフレックスボックスとグリッドです。この記事では、これら 2 つのプロパティの使用方法を、具体的なコード例を含めて紹介します。

1. フレックスボックス レイアウト属性

1. display: flex
   これは、フレックスボックスのエントリ属性であり、フレックスボックス レイアウトに配置される要素を指定するために使用されます。 「display:flex」を設定すると、親要素の子要素が自動的にflex項目となって並びます。

コード例:

.container {
  display: flex;
}

2. flex-direction
   このプロパティは、フレックス項目の配置方向を指定します。デフォルトは行 (左から右に配置) です。他の値は、行反転、列 (上から下)、または列反転にすることができます。

コード例:

.container {
  flex-direction: column;
}

3. justify-content
   主軸上のフレックス項目の配置を調整するために使用されます。一般的に使用される値には、flex-start (デフォルト、先頭から整列)、center (中央に整列)、flex-end (最後に整列)、space-between (項目間のスペースが均等に分散される) などが含まれます。 。

コード例:

.container {
  justify-content: center;
}

4. align-items
   このプロパティは、交差軸上のフレックス項目の配置を調整するために使用されます。一般的に使用される値には、flex-start (デフォルト、上揃え)、center (中央揃え)、flex-end (下揃え)、stretch (コンテナと同じ高さにストレッチ) などが含まれます。

コード例:

.container {
  align-items: center;
}

5. flex-wrap
   このプロパティは、フレックス項目を折り返すかどうかを制御するために使用されます。デフォルトでは、フレックス項目は自動的に折り返されます。nowrap 属性値を使用すると、折り返されないようにできます。

コード例:

.container {
  flex-wrap: wrap;
}

2. グリッド レイアウト属性

1. 表示: Grid
   これは、グリッド レイアウトのエントリ属性であり、次の目的で使用されます。指定 要素はグリッド レイアウトで配置されます。 「display:grid」を設定すると、親要素の子要素が自動的にグリッド項目となり、グリッドに沿って配置されます。

コード例:

.container {
  display: grid;
}

2. grid-template-columns および Grid-template-rows
   これら 2 つのプロパティは、グリッドの列と行を定義するために使用されます。サイズと数量。特定の幅またはパーセンテージを指定してサイズを定義したり、repeat 関数を使用してサイズを繰り返し指定したりできます。

コード例:

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px repeat(2, 1fr);
}

3. grid-gap
   このプロパティは、グリッド項目間のギャップ サイズを設定するために使用されます。ギャップ サイズは、特定のピクセル値またはパーセンテージを指定することで定義できます。

コード例:

.container {
  grid-gap: 20px;
}

4. justify-items と align-items
   これら 2 つのプロパティは、それぞれグリッド セル内のグリッド項目の配置を調整するために使用されます。 。 justify-items は水平方向の配置を制御し、align-items は垂直方向の配置を制御します。

コード例:

.container {
  justify-items: center;
  align-items: center;
}

5. grid-auto-flow
   このプロパティは、グリッド コンテナーがすべてのグリッド項目を収容できない場合にブラウザーがどのように動作するかを調整するために使用されます。これらのアイテムを配置します。一般的に使用される値には、行 (行に従って配置)、列 (列に従って配置)、密 (最適化されたグリッド充填) などが含まれます。

コード サンプル:

.container {
  grid-auto-flow: column;
}

結論:
Flexbox と Grid は、最新の CSS の非常に強力なレイアウト ツールであり、レスポンシブ デザインに非常に便利です。これらのプロパティを柔軟に使用することで、さまざまな画面サイズやデバイスの種類に適応したレイアウトを簡単に作成できます。この記事が役立つガイダンスを提供し、実際のプロジェクトに適用できることを願っています。

以上がCSS アダプティブ レイアウト プロパティのガイド: フレックスとグリッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。