Flexbox作业问题：main内section元素无法设置间距

问题描述 #

我在完成Flexbox相关作业时遇到问题：main容器内的三个section元素无法设置间距，之前实现过间距效果但调整后消失。尝试调整margin、padding以及justify-content属性均无效，希望将这三个section设置为彼此分离的独立盒子。

原代码 #

CSS

header,
footer {
  text-align: center;
}

main {
  background-color: lightpink;
  text-align: center;
  display: flex;
  margin: 10%;
  padding: 20px;
}

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Factoids Homework</title>
</head>

<body>
  <header id="header-main">
    <h1>Factoids</h1>
  </header>
  
  <main>
    <section class="content-section" id="div-one">
      <h2>Im Thinking of Ending Things</h2>

      <p>A popular psychological horror book by Iain Reid. Set during a snowy road trip, a girl is going to meet her boyfriends parents but is really considering leaving and ending things with him. It would be hard to really be able to describe the plot
        in more depth than that as this book is better when going in as blind as possible. A read that blends horror, psychological, and weirdness and will make you uncomfortable, but you wont know exactly why youre uncomfortable.</p>

      <a href="https://electricliterature.com/im-thinking-of-ending-things-as-lit-fic-philosophical-tract-and-thriller/">More</a>
    </section>

<section class="content-section" id="div-two">
      <h2>Gemini Home Entertainment</h2>

      <p>There is a niche genre of online horror that they call analog horror. It is basically the ability to use social media, or online platforms to build a horror story. The youtube series Gemini Home Entertainment is very popular among the people who
        watch analog horror. It is a series in the style of vhs tapes that is building a story of a world where these body snatcher type creatures exist. The most interesting part of this though is that the series is made by only one or two people. Which
        just makes it impressive. </p>

      <a href="https://www.youtube.com/GEMINIHOMEENTERTAINMENT">More</a>
    </section>
    
    <section class="content-section" id="div-three">
      <h2>Crows</h2>

      <p>
        Crows are one of the smartest species of bird to exist in the United States. Often found in open patches of land by woods, and love to congregate in fields as it is easy to spot things around them. They make and use the tools they make to help when finding
        food or disturding other tree climbers that could possibly take their food. It is also very well known that if you were to bother a crow they can remember your face, and hold a grudge. So its best to leave your local crows alone.
      </p>
      <a href="https://www.allaboutbirds.org/guide/American_Crow/overview">More</a>
    </section>
  </main>

  <footer id="footer-main">
    <p>KMO &copy 2024</p>
  </footer>
</body>
</html>

解决方案 #

方法1：给section添加margin（直观可控）

通过为每个section设置左右margin来创建间距，同时移除首尾元素的外侧margin，避免与main容器产生额外空隙：

.content-section {
  margin: 0 15px; /* 左右各15px间距，上下间距可按需调整 */
}
.content-section:first-child {
  margin-left: 0;
}
.content-section:last-child {
  margin-right: 0;
}

该方法兼容性极佳，适合需要精准控制间距大小的场景。

方法2：使用Flexbox原生gap属性（推荐）

Flexbox提供了gap属性，专门用于设置flex容器内子元素的间距，无需单独处理首尾元素，代码更简洁：

main {
  background-color: lightpink;
  text-align: center;
  display: flex;
  margin: 10%;
  padding: 20px;
  gap: 30px; /* 直接设置section之间的水平间距 */
}

这是Flexbox布局的最佳实践，能避免margin折叠等问题，现代浏览器均支持。

方法3：结合justify-content与flex-grow（自适应间距）

如果希望section自动填充main容器宽度，同时间距自适应剩余空间，可以使用以下设置：

main {
  background-color: lightpink;
  text-align: center;
  display: flex;
  margin: 10%;
  padding: 20px;
  justify-content: space-between;
}

.content-section {
  flex-grow: 1; /* 让section均分容器宽度 */
  margin: 0 10px; /* 可选，添加固定间距增强视觉效果 */
}

这种方式下，section会自动扩展宽度，间距会根据容器剩余空间自动分配。

为什么之前的尝试无效？ #

• 调整justify-content无效：默认情况下section宽度为内容宽度，当容器没有剩余空间时，justify-content不会产生间距效果。
• margin/padding无效：原CSS未针对.content-section元素设置样式，导致相关属性未被应用到section上。

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