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

Question

我想在所有我的弹箱盒的左右两侧都有相同的空间距离。目前我有这段代码：

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小提琴为例（如果它没有显示，你必须在最后选择样式代码，然后按回车键（JSbin中的一个错误...），它应该显示出来） 。

在第一个框的左侧，我得到2vh而不是4vh。看到： 在其他盒子之间它很好（4vh）。 最后一个框右侧没有任何空格。看到： 所以我的问题： 1）如何在第一个盒子的左边获得4vh？和 2）如何在最后一个框的右边获得4vh？

我试着查看它，并使用容器的填充看到了稍微不同的问题的解决方案。我更喜欢没有调整容器填充物的解决方案。

Answer 1

更新了答案

使用伪元素作为弹性项来占用空间：

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。

因此，第一个项目的边距空间将是一半（没有右边距，因为没有前一个框），而最后一个项目的边距是一半（没有左边距，因为没有其他框）。 / p>

相反，试试这个：

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

Answer 2

你可以使用第一胎和最后一胎

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

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

PS 小心;你没有正确关闭叠加div

Answer 3

试试这个

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;
}

现场演示 - https://jsbin.com/yeyemomili/1/edit?html,css,output