CSS パネル レイアウト プロパティの探索: フレックスとグリッド

CSS パネル レイアウト プロパティの探索: フレックスとグリッド

現代の Web 開発では、レイアウトは重要な側面です。以前は固定の幅と高さを使用してレイアウトを制御していましたが、レスポンシブ デザインの台頭により、より柔軟で適応性のあるレイアウト方法が必要になっています。 CSS はいくつかの強力なレイアウト プロパティを提供します。その中で最も一般的に使用されるのは flex と Grid です。この記事では、これら 2 つのプロパティの使用方法と具体的なコード例を紹介します。

1. フレックス レイアウト

フレックス レイアウトは、CSS3 で導入されたフレキシブル レイアウト モードです。コンテナ内の子要素を主軸上に配置し、主軸上のスペース割り当てルールに従ってそれらをレイアウトします。一般的に使用されるフレックス属性の一部を以下に示します。

• display: flex;: コンテナをフレックス レイアウトに設定します。
• flex-direction: 主軸の方向を指定します。 row (デフォルトの水平方向)、column (垂直方向)、row-reverse (水平方向の反転)、または column-reverse (垂直方向の反転)
• justify-content: 主軸上の子要素の配置を指定します。 、 flex -start (開始位置揃え)、flex-end (終了位置揃え)、center (中央位置合わせ)、space-between (両端を揃え、中央の等間隔)、または space-around (両端を揃え、等間隔) のいずれかになります。子要素間の間隔)
• align-items: 交差軸上の子要素の配置を指定します。これには、flex-start (上揃え)、flex-end (下揃え)、center (中央揃え) を指定できます。 、baseline (ベースライン配置) またはストレッチ (ストレッチ配置)
• flex-wrap: 子要素を折り返すかどうかを指定します。これには、nowrap (行の折り返しなし、デフォルト)、wrap (行の折り返し)、または Wrap-reverse を指定できます。 (逆行折り返し)

以下は簡単なフレックス レイアウトの例です:

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

<div class="container">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

2. グリッド レイアウト

グリッド レイアウトも強力なレイアウトです。 CSS3のシステム。コンテナを行と列に分割し、どのセルに子要素を配置するかを指定します。以下は一般的に使用されるグリッド属性の一部です:

• display:grid;: コンテナをグリッド レイアウトに設定します
• grid-template-columns: 列の数と幅を指定します。ピクセル (px)、パーセンテージ (%) を使用できます。また、自動 (auto) または分数 (fr) も使用できます。
• grid-template-rows: 行の数と高さを指定します。使用方法は次のとおりです。同上
• grid-column-gap: 列間のギャップを指定します。
• grid-row-gap: 行間のギャップを指定します。
• grid-template-areas: 指定します。テキスト識別子で構成される行列を使用して各セルの名前を定義します。

次は、単純なグリッド レイアウトの例です。

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item {
  background-color: #ddd;
  padding: 10px;
}
</style>

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

要約すると、flex と Grid は一般的に使用されます。最新の Web 開発で使用されるレイアウト属性。これらは、柔軟で適応性のあるレイアウトを作成できる強力なレイアウト機能を提供します。これらの属性を合理的に使用することで、Web ページのレイアウトをより適切に制御し、ユーザー エクスペリエンスを向上させることができます。

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