如何使用Flexbox实现两栏布局？_flex两栏布局-CSDN博客

要使用Flexbox实现两栏布局，可以按照以下步骤进行：

HTML结构

首先，创建一个容器元素，并在其中放置两个子元素，分别代表主内容栏和侧边栏。

<div class="wrapper">
    <section class="main-column">主内容区</section>
    <aside class="sidebar">侧边栏</aside>
</div>

CSS样式

接下来，为容器和子元素设置CSS样式。

容器样式

将容器的display属性设置为flex，以启用Flexbox布局。

.wrapper {
    display: flex;
}

主内容栏样式

设置主内容栏的宽度为自适应，使用flex-grow: 1属性使其占据剩余空间。

.main-column {
    flex-grow: 1;
    padding-right: 2rem;
}

侧边栏样式

设置侧边栏的宽度为固定值，例如30%。

.sidebar {
    width: 30%;
}

示例代码

以下是一个完整的示例代码，展示了如何使用Flexbox实现两栏布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局 - Flexbox</title>
    <style>
        .wrapper {
            display: flex;
        }
        .main-column {
            flex-grow: 1;
            padding-right: 2rem;
            background-color: #ddd;
        }
        .sidebar {
            width: 30%;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <section class="main-column">主内容区</section>
        <aside class="sidebar">侧边栏</aside>
    </div>
</body>
</html>

解释

容器：.wrapper类设置了display: flex;，这使得其子元素成为Flex项目，并按照Flexbox规则进行排列。
主内容栏：.main-column类设置了flex-grow: 1;，这意味着它将占据所有剩余的空间，从而实现自适应宽度。
侧边栏：.sidebar类设置了固定宽度为30%，这样侧边栏的宽度不会随屏幕大小变化而变化。

通过这种方式，可以轻松实现一个简单的两栏布局，并且该布局在不同屏幕尺寸下也能保持良好的响应性。

♯ 如何在Flexbox布局中实现响应式两栏布局？

在Flexbox布局中实现响应式两栏布局，可以通过以下步骤完成：

1. 基本的Flexbox两栏布局

Flexbox布局的核心是通过display: flex将容器设置为弹性容器，并通过flex-direction、justify-content和align-items等属性控制子元素的排列方式。以下是一个简单的两栏布局示例：

<div class="container">
    <div class="left">左侧栏</div>
    <div class="right">右侧栏</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap; /* 允许内容换行 */
}

.left {
    width: 30%; /* 左侧栏宽度 */
    background-color: #f0f0f0;
    padding: 20px;
}

.right {