使用Flexbox实现视口750px时单列转四行布局的技术咨询

问题分析 #

你当前的代码存在以下几个问题：

• CSS中@media规则语法错误，缺少and关键字，正确写法应为@media screen and (min-width: 750px)
• 目标选择器错误：.body类在你的HTML中不存在，无法生效
• section样式里有多余的/符号，会导致CSS解析错误
• 原布局中main内的section默认是块级元素，垂直单列排列，需要将main设为Flex容器来实现横向排列

修正后的代码 #

CSS代码

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

section {
  border: inset #333 thin;
  padding: 1em;
}

.animals {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.minerals {
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 30, 218);
}

.vegetables {
  display: flex;
  flex-direction: column;
  background-color: rgb(233, 255, 30);
}

/* 视口宽度≥750px时的布局调整 */
@media screen and (min-width: 750px) {
  /* 将main设为Flex容器，让section横向排列 */
  .animals main {
    display: flex;
    flex-direction: row;
    gap: 1em; /* 添加间距优化布局 */
  }
  /* 让每个section平分宽度 */
  .animals main section {
    flex: 1;
  }
}

HTML代码

<div class="animals">
  <header>
    <h2>Animals</h2>
    <h3>DNC</h3>
  </header>
  <main>
    <section>
      <h4>Animal One</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis animi, sit amet, consectetur adipiscing elit.</p>
    </section>
    <section>
      <h4>Animal Two</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis</p>
    </section>
    <section>
      <h4>Animal Three</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis animi, fortitudinis fomentis dolor mitigari solet. Omnes enim iucundum motum.</p>
    </section>
    <section>
      <h4>Animal Four</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </section>
  </main>
</div>

说明 #

• 修正了媒体查询的语法错误，确保在视口宽度≥750px时能正确触发布局调整
• 通过将main设为Flex容器并设置flex-direction: row，让四个section从垂直单列变为横向四列排列（匹配你描述的“四行排列”表述偏差）
• flex: 1属性让每个section平分容器宽度，保证布局均匀
• gap: 1em为section之间添加间距，提升视觉舒适度

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