如何用Flexbox实现双元素Footer的两侧居中布局？

问题原因 #

1. justify-content不生效：
   你设置的justify-content如果是加在footer上，它只会控制两个div在footer容器内的排列，无法影响div内部的img和p；如果是给div加justify-content，但div本身不是flex容器，这个属性根本不会起作用——只有flex容器的子元素才会受justify-content控制。

2. 移除flex:1后的异常：

• 文本换行：flex:1的作用是让两个div平分footer的可用宽度，移除后div的宽度会收缩到内容的最小宽度，当版权文本长度超过这个宽度时就会自动换行。
• logo变大：你的img设置了width:5%，这个百分比是相对于父元素div的宽度。当div有flex:1时，div宽度是footer的一半，img的实际宽度是这个一半宽度的5%；移除flex:1后，div的宽度由内部内容决定，此时浏览器会因为父元素宽度依赖子元素、子元素又用百分比宽度的循环引用，直接使用img的原始尺寸渲染，所以看起来logo变大了。

解决方案 #

要实现每个元素在各自区域内居中，同时保留平分空间的效果，只需修改CSS如下：

footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 45px;
}

footer div {
    flex: 1;
    /* 将div转为flex容器，才能控制内部元素居中 */
    display: flex;
    /* 水平居中内部元素 */
    justify-content: center;
    /* 垂直居中内部元素（按需选择） */
    align-items: center;
}

footer img {
    width: 5%;
    height: auto;
    /* 可选：限制logo最大宽度，避免footer过宽时logo过大 */
    max-width: 80px;
}

footer p {
    font-size: 0.7rem;
    /* 可选：强制版权文本不换行 */
    white-space: nowrap;
}

关键说明 #

• 把每个div设为flex容器后，justify-content和align-items就能控制内部img/p的居中位置，按需选择水平/垂直居中即可。
• 保留flex:1确保两个div始终平分footer宽度，从根源避免文本换行和logo尺寸异常。
• 加max-width和white-space: nowrap是优化细节，可根据实际视觉需求调整。

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