响应式布局问题求助：1×6布局无法自动转为3×2/2×3

你的核心问题是flex容器未开启换行，且缺少媒体查询控制不同屏幕下的列宽度。以下是修改后的完整代码：

修改后的CSS #

.frontpage_graphical_container {
  padding: 5px;
  display: flex;
  justify-content: center;
  top: 1000px;
}

.frontpage_graphical_row {
  display: flex;
  flex-wrap: wrap; /* 关键：开启换行 */
  justify-content: center; /* 每行元素居中对齐 */
  padding: 5px;
  width: 100%; /* 确保容器占满可用宽度 */
}

.frontpage_graphical_col {
  display: flex;
  flex-direction: column;
  margin: 5px;
  padding: 10px;
  border-radius: 20px;
  flex: 0 0 calc(100%/6 - 10px); /* 默认一行6个，减去左右margin总和 */
  box-sizing: border-box; /* 确保padding不撑开宽度 */
}

.frontpage_graphical_option {
  padding: 10px;
  border-radius: 20px;
  display: flex;
  justify-content: center; /* 图标居中 */
}

.option_name {
  padding: 15px;
  font-size: 15px;
  color: white;
  font-style: italic;
  text-align: center;
  background-color: rgb(102, 206, 213);
}

/* 中等屏幕：转为3×2布局 */
@media (max-width: 992px) {
  .frontpage_graphical_col {
    flex: 0 0 calc(100%/3 - 10px); /* 一行3个 */
  }
}

/* 小屏幕：转为2×3布局 */
@media (max-width: 768px) {
  .frontpage_graphical_col {
    flex: 0 0 calc(100%/2 - 10px); /* 一行2个 */
  }
}

修改后的HTML（统一标签结构） #

<div class="frontpage_graphical_container" style="background-color:rgb(151, 237, 224)">
  <div class="frontpage_graphical_row" style="background-color:rgb(45, 98, 97)">
    <div class="frontpage_graphical_col" style="background-color:rgb(115, 172, 225)">
      <span class="frontpage_graphical_option" style="background-color:rgb(215, 114, 231)">
        <i class="fa-regular fa-sack-dollar" style="font-size:50px; color:rgb(255, 255, 255);"></i>
      </span>
      <div class="option_name">
        <i>私人貸款</i>
      </div>
    </div>

    <div class="frontpage_graphical_col" style="background-color:rgb(114, 153, 231)">
      <span class="frontpage_graphical_option" style="background-color:rgb(120, 231, 114)">
        <i class="fa-regular fa-credit-card" style="font-size:50px; color:rgb(255, 255, 255);"></i>
      </span>
      <div class="option_name">
        <i>信用卡</i>
      </div>
    </div>

    <div class="frontpage_graphical_col" style="background-color:rgb(231, 186, 114)">
      <div class="frontpage_graphical_option" style="background-color:rgb(231, 114, 208)">
        <i class="fa-regular fa-route" style="font-size:50px; color:rgb(255, 255, 255);"></i>
      </div>
      <div class="option_name">
        <i>旅遊保險</i>
      </div>
    </div>

    <div class="frontpage_graphical_col" style="background-color:rgb(231, 114, 208)">
      <div class="frontpage_graphical_option" style="background-color:rgb(202, 231, 114)">
        <i class="fa-regular fa-building-columns" style="font-size:50px; color:rgb(255, 255, 255);"></i>
      </div>
      <div class="option_name">
        <i>虛擬銀行</i>
      </div>
    </div>

    <div class="frontpage_graphical_col" style="background-color:rgb(136, 231, 114)">
      <div class="frontpage_graphical_option" style="background-color:rgb(114, 147, 231)">
        <i class="fa-regular fa-arrow-trend-up" style="font-size:50px; color:rgb(255, 255, 255);"></i>
      </div>
      <div class="option_name">
        <i>證券戶口</i>
      </div>
    </div>

    <div class="frontpage_graphical_col" style="background-color:rgb(102, 206, 213)">
      <div class="frontpage_graphical_option" style="background-color:rgb(102, 206, 213)">
        <i class="fa-regular fa-star" style="font-size:50px; color:rgb(255, 255, 255);"></i>
      </div>
      <div class="option_name">
        <i>理財戶口</i>
      </div>
    </div>
  </div>
</div>

关键改动说明 #

• flex-wrap: wrap：给.frontpage_graphical_row添加该属性，让子元素在容器宽度不足时自动换行。
• 固定列宽：通过flex: 0 0 calc(...)精准控制每行显示的元素数量，同时减去margin避免布局溢出。
• 媒体查询：根据屏幕宽度切换列宽，实现1×6→3×2→2×3的响应式布局。
• box-sizing: border-box：确保padding和margin不会额外撑开元素宽度，保持布局稳定。

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