使用Flexbox与SCSS实现网站页脚布局的问题求助

嘿，我来帮你搞定这个页脚布局的问题！咱们先明确你的需求：.footer-main区块要整体居中，.footer-end里的h2靠左对齐，ul靠右排列。之前的尝试没达到预期，是因为flex布局的一些细节没处理到位，咱们一步步调整：

问题分析与调整思路 #

1. .footer-main居中问题：你现在的.footer-main用了display: flex，但默认是横向排列内部元素，而且没确保这个区块本身在footer里水平居中。咱们需要调整flex方向，同时让父容器footer辅助实现整体居中。
2. .footer-end左右分布问题：当前.footer-end只是设置了display: flex，但没配置元素的分布规则，所以h2和ul挤在一起。需要用justify-content来拉开两者的距离，同时确保.footer-end占满可用宽度。

修改后的完整SCSS代码 #

footer {
  padding: 10px;
  line-height: 80%;
  width: 100%;
  box-sizing: border-box; /* 避免padding撑大宽度 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 让内部section水平居中 */

  .footer-main {
    display: flex;
    flex-direction: column; /* 让内部p、a垂直堆叠 */
    align-items: center; /* 内部内容水平居中 */
    justify-content: center; /* 垂直方向居中（如果footer有高度的话） */
    margin-bottom: 10px; /* 和hr之间留点间距 */
  }

  .footer-end {
    display: flex;
    width: 100%; /* 占满footer宽度，才能用space-between */
    justify-content: space-between; /* h2靠左，ul靠右 */
    align-items: center; /* 让h2和ul垂直居中对齐 */
  }

  ul {
    display: flex;
    gap: 15px; /* 两个链接之间的间距 */
    padding-left: 0; /* 去掉ul默认的左内边距 */
    list-style: none;

    a {
      text-decoration: none; /* 去掉链接下划线 */
      color: inherit; /* 继承父元素颜色，可自定义 */
    }
  }
}

代码说明 #

• 给footer添加width: 100%和box-sizing: border-box，确保它不会因为padding超出页面宽度。
• .footer-main设置flex-direction: column让内部元素垂直排列，align-items: center让内容水平居中，配合footer的align-items: center实现整个区块的居中效果。
• .footer-end设置width: 100%和justify-content: space-between，直接实现h2左、ul右的布局，align-items: center让两者在垂直方向上对齐更美观。
• 优化了ul和a的样式，去掉默认内边距和链接下划线，添加间距提升可读性。

你的HTML代码不需要修改，直接用原来的就可以啦，调整后的SCSS应该能达到你想要的效果！

备注：内容来源于stack exchange，提问作者Marison