新手求助：如何用Flexbox/CSS Columns实现网页多列布局？

我是编程新手，正在完成网页布局作业，当前使用的HTML代码如下：

<div id="container">

    <!-- Use the header area for the website name or logo -->
    <header>
        <h1>Working with Columns</h1>
    </header>

    <!-- Use the main area to add the main content of the webpage -->
    <main>
        
        <article>

            <section>
                <h3>CSS Grid Layout</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

            <section>
                <h3>CSS Columns</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>

            <section>
                <h3>CSS Flexbox</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
            
        </article>
        
        <aside>
            <!-- Use the paragraph element below to summarize the method you used to create your columns. Identify the resource you used and include a link to the resource that opens in a new tab. -->
            <p></p>
            
            <!-- Use the paragraph element below to note the resource you used to create your favicon. Include a link to the resource that opens in a new tab. -->
            <p></p>
        </aside>

    </main>

    <!-- Use the footer area to add webpage footer content -->
    <footer>
        <p>Designed by:  </p>
    </footer>

</div>

我尝试用Flexbox或CSS Columns实现多列布局，但当前页面所有元素垂直堆叠，和示例中<main>区域分为左右两列（左侧文章、右侧侧边栏），且文章内章节可能为多列的效果不符，求对应的CSS代码写法。

解决方案 #

方法1：Flexbox实现整体布局（符合常见网页两列结构） #

该方案实现<main>区域的左右两列布局，同时可将<article>内的3个<section>设置为三列：

/* 基础重置：消除默认边距、统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器居中，限制最大宽度 */
#container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部样式 */
header {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

/* 核心：main区域设置Flex布局，实现左右两列 */
main {
  display: flex;
  gap: 30px; /* 两列之间的间距 */
}

/* 左侧文章区域：占比3份 */
article {
  flex: 3;
  /* 可选：将article内的section设置为三列 */
  display: flex;
  gap: 20px;
}

/* 每个section平分article宽度 */
article section {
  flex: 1;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* 右侧侧边栏：占比1份 */
aside {
  flex: 1;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

/* 底部样式 */
footer {
  margin-top: 30px;
  padding: 20px 0;
  border-top: 1px solid #eee;
  text-align: center;
}

方法2：CSS Columns实现文本分栏（若示例为文章内容拆分为多列文本） #

如果需求是将<article>内的文本内容自动拆分为多列，而非区块分栏，可使用CSS Columns：

/* 基础重置同上 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

header {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

/* main区域依旧用Flex实现左右两列 */
main {
  display: flex;
  gap: 30px;
}

/* 左侧文章设置为3列文本 */
article {
  flex: 3;
  columns: 3;
  column-gap: 20px;
}

/* 避免section被拆分到不同列 */
article section {
  break-inside: avoid;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}

aside {
  flex: 1;
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

footer {
  margin-top: 30px;
  padding: 20px 0;
  border-top: 1px solid #eee;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者BBDCJS