Flexbox的 CSS为什么不堆叠？

前端开发 2026-07-10

我现在遇到一个问题：每次在手机上查看我的网站时，CSS flexbox的项目会挤在一起变小，而不是按顺序垂直堆叠。

尽管在Stack Overflow的移动端预览看起来完全没问题，但在我的网站（在Neocities上）移动端却会被挤在一起。我尝试在媒体查询里添加 'flex-direction: column;' 来看看是否能解决问题，但这并没有解决。

同样，在Stack Overflow这边看起来没问题，但在我的网站上就会被挤在一起，我也不确定问题出在哪里。

下面是手机端的截图，以及一段代码片段。

一个图像显示三个并排的 DIV，边框很小且为黑色。它们各自都包含文字 "text"。

body {
  margin: 0;
  display: flex;
  justify-content: flex-end;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: flex;
  gap: 0.5em;
  width: 650px;
  padding: 0.5em;
  z-index: 999;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
}

.col {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5em;
  border: 1px solid #000;
}

.col-mid {
  display: flex;
  flex: 2;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5em;
}

.col-big {
  display: flex;
  flex: 3;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5em;
}

@media only screen and (max-width: 625px) {
  body {
    margin: 0;
  }

  .container {
    max-width: 650px;
    margin: 0px auto !important;
  }

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/css/main.css" rel="stylesheet" type="text/css" media="all">
  <script src="scripts.js" defer></script>
  <title>Your Website Name Here!</title>
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col">
        <p>text</p>
      </div>
      <div class="col">
        <p>text</p>
      </div>
      <div class="col">
        <p>text</p>
      </div>
    </div>
  </div>

</body>

解决方案

你发布的HTML其实有大量不需要的额外CSS。为简化回答你的问题，我已移除了HTML未使用的所有CSS。

基本问题在于，归根到底，你需要在“col”类上提供某种宽度。如果没有明确的宽度去显示，Flexbox就不会知道应该对它们进行换行。

body {
  margin: 0;
}

.container {
  width: 100%;
  padding: 0.5em;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
}

.col {
  border: 1px solid #000;
  width: 200px; 
}

<div class="container">
    <div class="row">
      <div class="col">
        <p>text</p>
      </div>
      <div class="col">
        <p>text</p>
      </div>
      <div class="col">
        <p>text</p>
      </div>
    </div>
  </div>

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。