CSS レイアウト - フロート、フレックスボックス、グリッド-CSSチュートリアル-php.cn

CSS レイアウト - フロート、フレックスボックス、グリッド

WBOY

リリース： 2024-09-03 14:55:48

オリジナル

1133 人が閲覧しました

CSS Layouts - Floats, Flexbox, and Grid

レクチャー 5: CSS レイアウト - フロート、フレックスボックス、グリッド

この講義では、CSS でレイアウトを作成するための重要なテクニックについて詳しく説明します。フロート、フレックスボックス、グリッドを使用してコンテンツを構造化する方法を理解すると、応答性が高く、よく整理された Web サイトを構築できるようになります。この講義を終えるまでに、さまざまな画面サイズやデバイスに適応するレイアウトを作成できるようになります。

CSS レイアウト手法を理解する

CSS はいくつかのレイアウト手法を提供しており、それぞれに独自の使用例があります。 Float、Flexbox、Grid という 3 つの基本的なメソッドについて説明します。

1.フロート

フロートは当初、画像の周囲にテキストを折り返すために設計されましたが、レイアウトの作成に広く使用されています。これらはほとんどが新しい技術に置き換えられていますが、特定の状況では依然として役に立ちます。

例:

  .left {
    float: left;
    width: 50%;
  }

  .right {
    float: right;
    width: 50%;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

ログイン後にコピー

HTML:

  <div class="clearfix">
    <div class="left">Left Content</div>
    <div class="right">Right Content</div>
  </div>

ログイン後にコピー

この例では、2 つの div が左右にフローティングされ、2 列のレイアウトが作成されます。

2.フレックスボックス

Flexbox は、強力な配置および配布機能を提供する、より最新のレイアウト技術です。柔軟で応答性の高いレイアウトを作成するのに最適です。

例:

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

  .flex-item {
    flex: 1;
    margin: 10px;
  }

ログイン後にコピー

HTML:

  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>

ログイン後にコピー

ここでは、.flex-container は Flexbox を使用して、3 つのアイテムをコンテナ全体に均等に配置し、アイテム間の間隔を等しくしています。

3. CSS グリッド

グリッドは CSS の最も強力なレイアウトシステムであり、行と列を正確に制御して複雑な 2 次元レイアウトを作成できます。

例:

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
  }

  .grid-item {
    padding: 20px;
    background-color: #ccc;
  }

ログイン後にコピー

HTML:

  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

ログイン後にコピー

この例では、2 列のグリッドレイアウトを作成します。最初の列はスペースの 1 つの部分を占め、2 番目の列は 2 つの部分を占め、項目間のギャップは 10 ピクセルです。

実践例:

Flexbox を使用して、ヘッダー、メインコンテンツ、フッターを配置する簡単な Web ページレイアウトを作成してみましょう。

HTML:

<div class="flex-container">
  <header class="flex-item header">Header</header>
  <main class="flex-item main">Main Content</main>
  <footer class="flex-item footer">Footer</footer>
</div>

ログイン後にコピー

CSS:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.main {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

ログイン後にコピー

この例では: