網格和彈性盒-css教學-PHP中文網

網格和彈性盒

王林

發布： 2024-09-10 18:00:09

原創

636 人瀏覽過

Grid and Flexbox

Grid 和 Flexbox 都是 CSS 中強大的佈局系統，每個系統都針對不同類型的佈局任務而設計。以下是兩者的比較，並舉例說明了它們的差異：

彈性盒

目的：
Flexbox 專為一維佈局而設計。它處理沿單一軸（行或列）的項目對齊和間距。

主要特點：

水平或垂直對齊項目。
分配容器內的空間。
靈活控制項目順序和大小。

範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* Distributes space between items */
            align-items: center; /* Aligns items vertically in the center */
            height: 100vh;
            background-color: lightgrey;
        }
        .item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
            flex: 1; /* Makes items flexible */
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

登入後複製

功能說明：

項目排成一行，並在它們之間分配空間。
項目在容器中垂直居中。
項目根據可用空間增大和縮小。

網格

目的：
網格是為二維佈局而設計的。它同時處理行和列，允許複雜的佈局。

主要特點：

建立行和列。
控制網格中的項目放置。
將項目跨多行和多列。

範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Creates three equal-width columns */
            grid-gap: 10px; /* Adds space between grid items */
            height: 100vh;
            background-color: lightgrey;
        }
        .item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .item:nth-child(2) {
            grid-column: span 2; /* Makes the second item span two columns */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

登入後複製

功能說明：