Html 第一个和最后一个flexbox框的边距

我希望所有flexbox的左右两侧都有相同的空间距离。目前我有以下代码：

body
  background-color white
  margin 0 0
  padding 0 0

.overlay
  display flex
  position absolute
  background-color grey
  cursor pointer
  color #8e3433
  flex-flow row nowrap
  justify-content flex-start
  height 40vh
  width 100vw
  bottom 0
  left 0
  margin 0
  overflow-y hidden
  overflow-x scroll

.overlay .item-image
  border-radius 5px
  flex 1 1 auto
  min-width 45.0vw
  width 45.0vw
  margin 0 2vw 0 2vw
  border 1px solid yellow

请以fiddle为例（如果它没有立即显示，您必须在末尾选择样式代码，然后按enter键（JSbin中的一个bug…），它应该会显示出来）

在第一个框的左侧，我得到的是2vh而不是4vh。见： 在其他盒子之间，一切正常（4vh）。最后一个框的右侧没有任何空间。见： 因此，我的问题是： 1） 如何在第一个盒子的左边得到4vh？；和 2） 如何让4vh在最后一个盒子的右边

---

我试着查找这一点，并看到了使用容器填充解决略有不同的问题的方法。我更喜欢不调整容器填充的解决方案。

您可以使用第一个孩子和最后一个孩子

.overlay .item-image:first-child {
    margin-left: 4vw;
}

.overlay .item-image:last-child {
    margin-right: 4vw;
}

ps 小心；您没有正确关闭覆盖div

更新的答案

将伪元素用作弹性项以占用空间：

ul{
列表样式类型：无；
填充：0；
保证金：0；
显示器：flex；
高度：300px；
溢出-x：自动；
宽度：600px；
背景：橙色；
}
李{
左边距：30px；
背景：蓝色；
颜色：#fff；
填充：90px；
空白：nowrap；
弹性基础：自动；
}
ul:之后{
内容：“；
柔性：0 30像素；
}

项目1
项目2
项目3
项目4

试试这个

body {
    background-color: #fff;
    margin: 0 0;
    padding: 0 0;
}

.overlay {
    display: flex;
    position: absolute;
    background-color: #808080;
    color: #f00;
    justify-content: space-between;
    height: 40vh;
    padding: 0 4vw;
    bottom: 0;
    left: 0;
    margin: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}

.overlay .item-image {
    border-radius: 5px;
    flex: 1 1 auto;
    min-width: 45vw;
    width: 45vw;
    border: 1px solid #00f;
}

.overlay .item-image :last-child:after {
  content: "";
  width: 30px;
  height: 1px;
  position: absolute;
  left: 100%;
  top: 0px;
}

---

现场演示-

顺便说一句，你可以让它在没有flex的情况下工作：是的，但小提琴是一个简化的例子。。。我的扩展案例需要flexbox。我会试试。请注意，在我的小提琴中，在最后一个方框之后根本没有边距（尽管它应该有一个右边距）。你知道为什么吗？你能实现你在这把小提琴里给出的解决方案吗：在我的小提琴里？在我的例子中，我要么有父容器（a）box元素，要么（b）有一个类名为“empty div”的div，其宽度应为100vw。然而，当我们创建一个伪元素（after）时，这种情况也存在于案例b中，我最终得到一个空div 96vw。你知道怎么解决这个问题吗？我尝试将pseudo元素设置为none，以防类名为“empty div”的兄弟节点，但没有成功……您能提供代码吗？或者发布一个包含所有细节的新问题。使用真实元素（vs伪元素）解决它。在案例A中，我通过javascript添加了一个div，其中包含

的
id='flexboxhack'
，然后将
#flexboxhack{flex:0 0 2vw；}
添加到我的CSS中。由于在我的案例B中不会生成此元素，因此它现在可以正常工作。