场景介绍
父元素内有数量不固定的子元素，当子元素宽度之和小于父元素时，子元素平均分配父元素宽度；当子元素宽度之和大于父元素时，子元素有最小宽度，滚动条显示。
1. 子元素宽度小于父元素，上下左右留有空白
子元素宽度小于父元素.png
2. 子元素宽度大于父元素，上下左右留有空白
image.png
错误实现
代码实现
<div class="box">
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
</div>
.box {
width: 500px;
border: 1px solid #e0e0e0;
padding: 20px;
display: flex;
overflow: auto;
box-sizing: border-box;
}
.con1 {
flex: 1;
min-width: 100px;
height: 80px;
border: 1px solid red;
}
当子元素宽度之和大于父元素时，上下左都留有空白，右无空白
子元素宽度大于父元素.png
正确实现方式
方法1：多增加一层包裹元素
<div class="box method-one">
<div class="content">
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
</div>
</div>
/*附加样式*/
.method-one {
padding: 0;
}
.content {
flex: 1;
display: flex;
padding: 20px;
}
方法2：after伪元素添加宽度为20的占位元素
<div class="box method-two">
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
<div class="con1"></div>
</div>
/*附加样式*/
.method-two {
padding-right: 0;
}
.method-two::after {
content: '';
width: 20px;
flex-shrink: 0;
}
文中代码对应demo
看似简单的问题却又不简单，奥力给！！
如有不对的地方或者好的实现方式，欢迎指正哦！
