学习HTML5/CSS时遇Flex容器右侧留白问题求助

你的Flex容器右侧出现留白，核心原因是内部子div没有占据容器的可用横向空间：

Flex容器设置display: flex后，子元素默认会根据自身内容宽度撑开，不会自动填满容器剩余空间。再加上你给图片设置了width:70%（该百分比基于父元素子div的宽度计算），进一步限制了子div的宽度，最终导致容器右侧出现空白区域。

解决方法（二选一即可） #

1. 让子div占满容器可用空间
   给子div添加width: 100%或者flex: 1属性，强制它填满Flex容器的横向空间：

.flex-container > div {
    background-color: grey;
    padding-top: 2%;
    padding-left: 2%;
    padding-bottom: 2%;
    margin-top: 1em;
    width: 100%; /* 或者替换成 flex: 1; */
}

2. 让图片占满子div，同时子div占满容器
   如果希望图片填满子div宽度，可同时调整图片宽度为100%：

.flex-container > div {
    background-color: grey;
    padding-top: 2%;
    padding-left: 2%;
    padding-bottom: 2%;
    margin-top: 1em;
    width: 100%;
}

.flex-container > div img {
    width: 100%;
}

补充说明 #

• flex:1是flex-grow:1、flex-shrink:1、flex-basis:0%的简写，会让子元素自动占据容器剩余空间，适合动态分配空间的场景；
• width:100%则直接让子元素宽度等于容器可用宽度（减去容器内边距），逻辑更直接。

内容的提问来源于stack exchange，提问作者ゼーンゝZayn