CSS 佈局 - 浮動、Flexbox 和網格-css教學-PHP中文網

CSS 佈局 - 浮動、Flexbox 和網格

WBOY

發布： 2024-09-03 14:55:48

原創

1104 人瀏覽過

CSS Layouts - Floats, Flexbox, and Grid

第 5 講：CSS 版面 - 浮動、Flexbox 與網格

在本次講座中，我們將深入探討在 CSS 中建立佈局的基本技術。了解如何使用浮動、Flexbox 和網格建立內容將使您能夠建立響應靈敏且組織良好的網站。在本講座結束時，您將能夠建立適應不同螢幕尺寸和設備的佈局。

了解 CSS 佈局技術

CSS 提供了多種佈局技術，每種技術都有自己的用例。我們將介紹三種基本方法：Floats、Flexbox 和 Grid。

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>

登入後複製

在此範例中，兩個 div 左右浮動，建立兩列佈局。

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. CSS 網格

網格是 CSS 中最強大的佈局系統，可讓您建立複雜的二維佈局，並精確控制行和列。

範例：

  .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>

登入後複製

此範例建立一個包含兩列的網格佈局。第一列佔據一小部分空間，第二列佔據兩部分空間，項目之間的間隙為 10px。

實際範例：

讓我們使用 Flexbox 建立一個簡單的網頁版面來排列頁首、主要內容和頁尾。

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;
}

登入後複製

在此範例中：