使用 Flexbox 和 Grid 布局实现三列布局（左右固定宽度，中间自适应）

时间: 2024-10-20 15:13:58

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

以下是使用 Flexbox 和 Grid 布局实现三列布局（左右固定宽度，中间自适应）的示例。

方法一：Flexbox 布局

HTML 示例：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三列布局 - Flexbox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <div>左侧固定列</div>
        <div>中间自适应列</div>
        <div>右侧固定列</div>
    </div>
</body>
</html>

CSS 示例（styles.css）：


body {
    margin: 0;
}

.container {
    display: flex;
    height: 100vh; /* 使容器高度充满视口 */
}

.left, .right {
    width: 200px; /* 固定宽度 */
    background-color: #f0f0f0; /* 背景颜色 */
}

.middle {
    flex: 1; /* 自适应列，占据剩余空间 */
    background-color: #d0e0f0; /* 背景颜色 */
}

方法二：Grid 布局

HTML 示例：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三列布局 - Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <div>左侧固定列</div>
        <div>中间自适应列</div>
        <div>右侧固定列</div>
    </div>
</body>
</html>

CSS 示例（styles.css）：


body {
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px; /* 左右两列固定宽度，中间列自适应 */
    height: 100vh; /* 使容器高度充满视口 */
}

.left, .right {
    background-color: #f0f0f0; /* 背景颜色 */
}

.middle {
    background-color: #d0e0f0; /* 背景颜色 */
}

总结

- Flexbox方法：通过设置容器为 display: flex，让左右列固定宽度，并使用 flex: 1 使中间列自适应剩余空间。

- Grid方法：通过设置容器为 display: grid，使用 grid-template-columns 定义三列布局，其中左右列设为固定宽度（200px），中间列设为自适应（1fr）。

这两种方法都能有效实现三列布局，具体选择方法可以根据项目需求和开发者的偏好来决定。