Flexbox布局下Tea Cozy项目footer未按CSS样式显示问题排查

做Codecademy平台的Tea Cozy项目时，需要纯flexbox实现100%宽度的页脚，页脚内放置联系信息、版权信息两个区块，但当前footer样式未按预期生效，附上全量CSS、HTML代码排查问题，同时需要代码优化建议。

• HTML结构缺失：当前<footer>标签内部为空，写好样式的.contact、.copyright两个div根本没有放入footer标签内，样式自然无法生效。
• flex容器属性误用：footer设置了display: inline-flex，该属性会让容器具备行内元素特性，宽度随内容收缩，无法自动撑满父级100%宽度。
• 布局偏移冗余：给.locations区块设置了right: 60px的手动偏移，同时多个区块靠手动设置top值避开固定头部，打乱了flex的自动排布逻辑，容易引发错位。
• 地址区块flex方向写反：.locations-info设置了flex-flow: wrap column，三个地址卡片会纵向堆叠，不符合设计稿横向并排的要求。
• 浏览器默认样式未重置：body标签自带默认margin，会导致页面出现横向滚动条，100%宽度的元素会超出视口。

补全footer的HTML结构 #

<footer>
  <div class="contact">
    <h2>The Tea Cozy</h2>
    <h5>contact@theteacozy.com</h5>
    <h5>917-555-8904</h5>
  </div>
  <div class="copyright">
    <h5>copyright The Tea Cozy 2017</h5>
  </div>
</footer>

修正对应CSS规则 #

/* 重置body默认样式，用padding给固定头部留位置，替代手动给子元素加top偏移 */
body {
  display: flex;
  flex-flow: wrap row;
  justify-content: center;
  margin: 0;
  padding-top: 69px;
}

/* 移除locations的手动偏移，修正布局 */
.locations {
  display: flex;
  justify-content: center;
  flex-flow: wrap column;
  width: 1200px;
  background-image: url(../images/locations-background.jpg);
  height: 500px;
  align-items: center;
  position: relative;
  margin: 40px 0;
  /* 删除原代码里的right:60px、top:140px、margin-bottom:140px */
}

/* 修正地址容器flex方向，让三个卡片横向并排 */
.locations .locations-info {
  display: flex;
  flex-flow: wrap row;
  justify-content: space-around;
  align-items: center;
  width: 1020px; 
  height: 300px;
  gap: 40px;
  /* 删除原代码里的top:100px、z-index:1 */
}

/* 修正footer的flex属性，保证撑满100%宽度 */
footer {
  height: 240px;
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  /* 删除原代码里的inline-flex、测试用border样式 */
}

/* 调整联系信息区块布局 */
footer .contact {
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  /* 删除原代码里的line-height:5px，过小的行高会导致文字重叠 */
}

/* 调整版权区块布局 */
footer .copyright {
  width: 100%;
  padding-left: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  /* 删除原代码里的测试border、固定height */
}

• 固定定位的头部占位不要靠给每个后续区块加top偏移实现，直接给body加和头部高度一致的padding-top即可，适配性更强，不会出现不同屏幕下的错位。
• 需要容器撑满父级宽度时，用display: flex即可，display: inline-flex适合容器宽度随内容自适应的场景，不要混用。
• 写flex布局前先明确子元素的排布方向：横向并排用row，纵向堆叠用column，避免方向写反导致布局错乱。
• 调试阶段加的border、偏移属性确认效果后要及时删掉，避免干扰正式布局。

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