CSS Flex页脚布局问题：首行第四列宽度不均且图片无法居中

问题描述 #

我正在制作一个包含两行结构的footer：首行设置4个等宽列，第一、第四列放置图片，第二、第三列放置内容；第二行宽度占100%。目前其他部分均正常，但首行第四列宽度略小于另外三列，且其中的图片无法居中（第一列图片可正常居中），排查许久仍未找到原因。

原始代码 #

HTML代码 #

<footer>
  <div class="row1">
    <div class="column">
      <div class="column1">
        1st Image here and centered (This one is centered)
      </div>
    </div>
    <div class="column">
      <div class="column2">
        Some Content here
      </div>
    </div>
    <div class="column">
      <div class="column3">
        Other Content here
      </div>
    </div>
    <div class="column">
      <div class="column4">
        3rd Image here and centered (This one will not center)
      </div>
    </div>
  </div>
  <div class="row2">
    <div class="copywright">
      © 2023 All rights reserved.
    </div>
  </div>
</footer>

CSS代码 #

footer {
  width: 100%;
  height: 280px;
  margin-top: 100px;
  position: absolute;
  margin-bottom: 0;
  padding-bottom: 0;
}

.row1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  height: 90%;
  background-color: #fcf8f8;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.column1 {
  background-color: orange;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.column1 img {
  background-color: rgb(0, 0, 0, .6);
  border: 1px solid;
  border-radius: 20%;
  max-width: 70%;
  max-height: 70%;
}

.column2 {
  background-color: rgb(41, 41, 49);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column3 {
  background-color: blue;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column4 {
  background-color: rgb(214, 26, 26);
  height: 100%;
  /* background-color: aliceblue; */
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.column4 img {
  background-color: rgba(239, 234, 234, 0.6);
  border: 1px solid;
  border-radius: 20%;
  max-width: 70%;
  max-height: 70%;
}

.copywright {
  color: beige;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
  text-align: center;
  background-color: black;
  position: relative;
  height: 30px;
  font-size: 16px;
  justify-content: center;
}

问题原因与解决方案 #

核心问题 #

• .row1设置了flex-wrap: wrap，flex容器开启换行后，浏览器计算列宽时易出现精度误差，导致最后一列被压缩。
• .column的flex-basis: 100%会让列在换行时占满整行，与4列等宽的需求冲突，同时干扰内部元素的居中计算。

修改步骤 #

1. 移除.row1的flex-wrap: wrap：确保4列始终在同一行显示，避免换行引发的宽度异常。
2. 调整.column的flex属性：将flex-basis: 100%; flex: 1改为flex: 1 0 25%，明确每列基础宽度为25%，同时允许伸缩适配容器，保证4列严格等宽。

修改后的CSS代码 #

footer {
  width: 100%;
  height: 280px;
  margin-top: 100px;
  position: absolute;
  margin-bottom: 0;
  padding-bottom: 0;
}

.row1 {
  display: flex;
  flex-direction: row;
  /* 移除flex-wrap: wrap，确保4列在一行 */
  max-width: 100%;
  height: 90%;
  background-color: #fcf8f8;
}

.column {
  display: flex;
  flex-direction: column;
  /* 设置flex属性，保证每列基础宽度25%，等宽显示 */
  flex: 1 0 25%;
}

.column1 {
  background-color: orange;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.column1 img {
  background-color: rgb(0, 0, 0, .6);
  border: 1px solid;
  border-radius: 20%;
  max-width: 70%;
  max-height: 70%;
}

.column2 {
  background-color: rgb(41, 41, 49);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column3 {
  background-color: blue;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column4 {
  background-color: rgb(214, 26, 26);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.column4 img {
  background-color: rgba(239, 234, 234, 0.6);
  border: 1px solid;
  border-radius: 20%;
  max-width: 70%;
  max-height: 70%;
}

.copywright {
  color: beige;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
  text-align: center;
  background-color: black;
  position: relative;
  height: 30px;
  font-size: 16px;
  justify-content: center;
}

效果验证 #

修改后，4列会严格等宽，第四列的图片也会和第一列一样正常居中，彻底解决宽度异常和居中问题。

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