如何在不同屏幕宽度下调整Flexbox子项的对齐方式？

方案一：让左侧区块始终独占一行 #

要是想让footer__left__div一直单独占一行，右侧三个列表区块在下方排列，给左侧区块加这段CSS就行：

.footer__left__div {
  flex: 0 0 100%; /* 强制占满整行宽度 */
  margin-bottom: 1.5rem; /* 可选：和下方区块拉开点距离 */
}

同时把父容器的justify-content改成flex-start，避免右侧区块分散：

.footer__main__div {
  /* 保留原有属性，修改这一项 */
  justify-content: flex-start;
  gap: 2rem; /* 可选：用这个统一控制子项间距，比单独加margin方便 */
}

方案二：仅小屏幕时左侧区块独占一行 #

如果大屏幕想让四个子项并排，小屏幕才让左侧区块单独一行，用媒体查询就行：

.footer__main__div {
  /* 保留原有属性，加上gap控制间距 */
  gap: 2rem;
}

@media (max-width: 768px) {
  .footer__left__div {
    flex: 0 0 100%;
    margin-bottom: 1.5rem;
  }
}

解决换行后元素分散的问题 #

要是你遇到的是换行后最后一行元素因space-between导致间距过大的问题，直接把父容器的justify-content换成flex-start，再用gap统一控制子项的水平和垂直间距：

.footer__main__div {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  flex-wrap: wrap;
  justify-content: flex-start; /* 替换原来的space-between */
  gap: 2rem; /* 子项之间的间距 */
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

这样改完，子项换行时会自动左对齐，不会出现分散的情况，和你预期的效果一致。

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