网格和弹性盒-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>

登录后复制

功能说明：