如何使用Flexbox实现网格首尾两端与内部元素间距一致？

你需要的效果可以通过给flex容器添加水平内边距实现，原理是gap属性仅控制相邻flex子项之间的间距，不会作用于容器和首尾子项的衔接位置，补充等宽的左右内边距即可实现全链路统一的50px间距。

修改后完整代码 #

CSS 代码 #

.flex{
  display:flex;
  width:100%;
  background:yellow;
  align-items:center;
  flex-wrap: nowrap;
  overflow:auto;
  gap:50px;
  /* 新增左右内边距实现首尾50px间距 */
  padding: 0 50px;
  /* 避免padding导致容器实际宽度超出100% */
  box-sizing: border-box;
}

.flex div{
 width:90px;
 background:red;
 /* 避免子元素被挤压缩窄 */
 flex-shrink: 0;
}

HTML 代码（无需修改） #

<div class="flex">
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
</div>

可选方案：使用伪元素实现 #

如果你不想修改容器的内边距，也可以通过给flex容器添加首尾伪元素，依靠gap自动生成首尾间距，效果和加padding完全一致：

.flex::before,
.flex::after {
  content: "";
  width: 0;
  flex-shrink: 0;
}

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