html - 第一个和最后一个 flexbox 框的边距

Question

我希望所有 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

请参阅this以 fiddle 为例(如果它没有立即显示，你必须在最后选择样式代码，然后按回车键(JSbin 中的一个错误......)它应该会显示出来)。

在第一个框 的左侧，我得到 2vh 而不是 4vh。看: 在其他盒子之间一切都很好(4vh)。 最后一个框 的右侧没有任何空间。看: 所以我的问题: 1) 如何获取第一个框左侧的 4vh？；和 2) 如何得到最后一个方框右边的4vh？

我尝试查找它并看到使用容器填充解决略有不同问题的解决方案。我更喜欢不调整容器填充的解决方案。

Answer 1

更新的答案

使用伪元素作为flex item来占用空间:

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 300px;
  overflow-x: auto;
  width: 600px;
  background: orange;
}
li {
  margin-left: 30px;
  background: blue;
  color: #fff;
  padding: 90px;
  white-space: nowrap;
  flex-basis: auto;
}
ul::after {
  content: "";
  flex: 0 0 30px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

---

上一个答案

注意:由于框被“过度约束”，下面的解决方案可能不起作用(参见: How can I stop the last margin collapsing in flexbox? )

每个框的左右边距为 2vw。

所以边距空间将是第一个元素的一半(没有右边距，因为没有前一个框)和最后一个元素的一半(没有左边距，因为没有额外的框)。

相反，试试这个:

.item-image { margin-left: 4vw }
.item-image:last-child { margin-right: 4w }