HTML新手求助：如何在flex布局div上方添加新行（不使用table）

我是HTML新手，现有一段实现flex布局的代码，包含一个.button-container容器，内部有4个.button-box元素。想在该容器上方添加一行类似元素，实现类表格布局（不使用table标签），但尝试多种方法后，新元素始终横向排列在原有元素旁，无法位于上方。

原有代码 #

CSS #

body {
  background-color: #61162d;
  margin: 0px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.button-container {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button-box {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: calc(25% - 20px);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 15px;
}

@media only screen and (max-width: 681px) {
  .button-container {
    display: inline-block;
    width: 80%;
    height: 90%;
  }
  .button-box {
    display: inline-block;
    width: 80%;
  }
  .btn {
    display: inline-block;
    width: 80%;
  }
}

.button-box:hover {
  transform: translateY(-5px);
}

.button-box h2 {
  margin-bottom: 10px;
}

.button-box .btn {
  background-color: #b5a36a;
  border: 2px solid #b5a36a;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  padding: 8px 16px;
  margin: 5px 0;
  transition: background-color 0.3s, color 0.3s;
}

.button-box .btn:hover {
  background-color: #fff;
  color: #b5a36a;
}

.logos-container {
  display: flex;
  width: 80%;
}

HTML #

<div class="button-container">
  <div class="button-box">
    <h2>Title 1</h2>
    <a href="#" class="btn">Button 1A</a>
    <a href="#" class="btn">Button 1B</a>
  </div>
  <div class="button-box">
    <h2>Title 2</h2>
    <a href="#" class="btn">Button 2A</a>
    <a href="#" class="btn">Button 2B</a>
  </div>
  <div class="button-box">
    <h2>Title 3</h2>
    <a href="#" class="btn">Button 3A</a>
    <a href="#" class="btn">Button 3B</a>
  </div>
  <div class="button-box">
    <h2>Title 4</h2>
    <a href="#" class="btn">Button 4A</a>
    <a href="#" class="btn">Button 4B</a>
  </div>
</div>

解决方案 #

核心是给所有按钮容器套一个垂直方向的flex外层容器，让两行元素垂直堆叠，具体修改如下：

修改后的完整代码 #

CSS

body {
  background-color: #61162d;
  margin: 0px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 新增外层垂直flex容器 */
.main-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 控制两行的间距 */
  width: 90%;
  max-width: 1200px; /* 限制最大宽度，保证布局美观 */
}

.button-container {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%; /* 让每个按钮容器占满外层容器宽度 */
}

.button-box {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: calc(25% - 20px);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px 15px;
}

@media only screen and (max-width: 681px) {
  .main-container {
    width: 90%;
  }
  .button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .button-box {
    width: 80%;
    margin: 10px 0;
  }
  .btn {
    width: 80%;
  }
}

.button-box:hover {
  transform: translateY(-5px);
}

.button-box h2 {
  margin-bottom: 10px;
}

.button-box .btn {
  background-color: #b5a36a;
  border: 2px solid #b5a36a;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  padding: 8px 16px;
  margin: 5px 0;
  transition: background-color 0.3s, color 0.3s;
}

.button-box .btn:hover {
  background-color: #fff;
  color: #b5a36a;
}

.logos-container {
  display: flex;
  width: 80%;
}

HTML

<div class="main-container">
  <!-- 新增的上方按钮行 -->
  <div class="button-container">
    <div class="button-box">
      <h2>Top Title 1</h2>
      <a href="#" class="btn">Top Button 1A</a>
      <a href="#" class="btn">Top Button 1B</a>
    </div>
    <div class="button-box">
      <h2>Top Title 2</h2>
      <a href="#" class="btn">Top Button 2A</a>
      <a href="#" class="btn">Top Button 2B</a>
    </div>
    <div class="button-box">
      <h2>Top Title 3</h2>
      <a href="#" class="btn">Top Button 3A</a>
      <a href="#" class="btn">Top Button 3B</a>
    </div>
    <div class="button-box">
      <h2>Top Title 4</h2>
      <a href="#" class="btn">Top Button 4A</a>
      <a href="#" class="btn">Top Button 4B</a>
    </div>
  </div>

  <!-- 原有按钮行 -->
  <div class="button-container">
    <div class="button-box">
      <h2>Title 1</h2>
      <a href="#" class="btn">Button 1A</a>
      <a href="#" class="btn">Button 1B</a>
    </div>
    <div class="button-box">
      <h2>Title 2</h2>
      <a href="#" class="btn">Button 2A</a>
      <a href="#" class="btn">Button 2B</a>
    </div>
    <div class="button-box">
      <h2>Title 3</h2>
      <a href="#" class="btn">Button 3A</a>
      <a href="#" class="btn">Button 3B</a>
    </div>
    <div class="button-box">
      <h2>Title 4</h2>
      <a href="#" class="btn">Button 4A</a>
      <a href="#" class="btn">Button 4B</a>
    </div>
  </div>
</div>

关键修改说明 #

1. 新增.main-container，设置flex-direction: column让内部的两个.button-container垂直排列，gap控制行间距
2. 给.button-container设置width: 100%，保证两行的宽度一致，实现类表格的对齐效果
3. 调整移动端媒体查询，把.button-container改成垂直flex布局，确保移动端上下行的元素都能正常堆叠显示

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