移动端display:flex的justify-content:space-around失效，footer显示异常求助

问题描述 #

桌面端footer显示正常，但手机等小屏幕设备上，电话号码与邮箱无法完整显示且未居中。原代码使用display:flex和justify-content:space-around布局，尝试media query调试未解决问题。

原代码片段 #

HTML代码

<footer class="footerDesktop">
    <p><a href="#">06 xx xx xx xx</a></p>
    <p><a href="#">xxxxxx@gmail.com</a></p>
</footer>

CSS代码

.footerDesktop {
  margin: 0 auto;
  position: fixed;
  bottom:0;
  min-width: 720px;
  background-color: #333;
  width: 100%;
  color: #777;
  min-height: 50px;
  display: flex;
  justify-content:space-around;
  align-items:center; 
}

.footerDesktop p {
  width: 40%; 
  box-sizing: border-box;
  text-align: center;
}

.footerDesktop a {
  text-align: center;
  text-decoration: none;    
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 0.8em;
  color: #777;
  margin-bottom: -10;
  padding-bottom: 0;
}

问题分析 #

1. min-width:720px强制限制：小屏幕设备视口宽度小于720px时，footer会超出屏幕范围，直接导致内容被截断无法完整显示。
2. 固定宽度width:40%：给<p>标签设置固定宽度，flex布局下这个限制会压缩内容空间，没必要给子元素固定宽度，flex本身可自动分配空间。
3. 无单位的margin-bottom:-10：CSS属性值必须带单位，缺失单位会导致样式解析异常，影响布局对齐效果。

修复方案 #

修改CSS代码，移除不合理限制并添加响应式适配：

.footerDesktop {
  margin: 0 auto;
  position: fixed;
  bottom:0;
  /* 移除强制最小宽度，让footer自适应屏幕 */
  /* min-width: 720px; */
  background-color: #333;
  width: 100%;
  color: #777;
  min-height: 50px;
  display: flex;
  justify-content:space-around;
  align-items:center; 
  /* 防止内容溢出屏幕 */
  overflow: hidden;
}

.footerDesktop p {
  /* 移除固定宽度，交给flex自动分配空间 */
  /* width: 40%; */
  box-sizing: border-box;
  text-align: center;
  /* 添加左右内边距，避免内容贴边 */
  padding: 0 10px;
}

.footerDesktop a {
  text-align: center;
  text-decoration: none;    
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 0.8em;
  color: #777;
  /* 补全单位，不需要的话可直接删除该属性 */
  margin-bottom: -10px;
  padding-bottom: 0;
}

/* 小屏幕适配：调整字体大小 */
@media screen and (max-width: 720px) {
  .footerDesktop a {
    font-size: 0.7em;
  }
}

/* 极端小屏幕适配：改为垂直布局 */
@media screen and (max-width: 480px) {
  .footerDesktop {
    flex-direction: column;
    min-height: auto;
    padding: 10px 0;
  }
}

修复说明 #

1. 移除min-width:720px，让footer能自适应小屏幕宽度，避免内容超出视口。
2. 删除<p>的固定宽度，依靠justify-content:space-around让两个元素均匀分布，保证居中对齐。
3. 给<p>添加左右内边距，避免内容紧贴屏幕边缘，提升视觉体验。
4. 补全margin-bottom的单位，消除样式解析异常。
5. 添加两层media query，针对不同尺寸的小屏幕分别调整字体大小和布局方式，确保内容完整显示。

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