边距不适用于x-scrollable灵活元素的最后一个子元素[重复]答案

【问题标题】：margin not working on last child of x-scrollable flexible element [duplicate]边距不适用于x-scrollable灵活元素的最后一个子元素[重复]
【发布时间】：2019-11-07 15:31:23
【问题描述】：

我在一个水平滚动容器上工作，我需要最后一个孩子在滚动结束时从容器的右边界有一个空间，我将最后一个孩子的边距设置为 70px 但是当我完成滚动， las 孩子的右边界卡在容器的右边界，完全忽略了边距。边距是存在的，但它被忽略了。

你可以在这支笔上看到它：

https://codepen.io/CarlosPisarello/pen/JQyOpB

CSS

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: visible;
  padding-bottom: 35px;
  padding-top: 35px;
  width: 100%;
  .card {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 15px rgba(red, .3);
    margin-bottom: 20px;
    margin: 0 20px;
    flex: 0 0 auto;
    &:first-child {
      margin-left: 70px;
    }
    &:last-child {
      margin-right: 70px;
    }
  }
}

HTML

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

【问题讨论】：

元素上有边距。但似乎因为您使用的是 flex，所以它不包括容器中的边距。填充似乎也是如此。我会玩弄你的代码笔，看看能不能帮你找到解决办法。

标签： html css scroll flexbox

【解决方案1】：

我猜这是由于边距折叠造成的。

一种解决方法是在 CSS 中的最后一张卡片上添加一个伪元素，如下所示：

[ ...CSS for card ...]
&:last-child {
  position: relative;
  &::after {
    position: absolute;
    content: '';
    right: -70px;
    width: 70px;
    height: 100%;
  }
}

由于这里的sn-ps不能做SCSS，我也加个codepen链接：https://codepen.io/anon/pen/NZvyVZ

【讨论】：

【解决方案2】：

经过一些研究，最好的解决方案是在末尾添加一个元素，该元素是您需要的填充/边距的伪元素。由于使用flex，浏览器会忽略任何子元素右侧的任何margin 或padding。

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  padding: 35px 70px;
}
.card {
  min-width: 300px;
  height: 300px;
  border: 1px solid red;
  border-radius: 2px;
  display: inline-block;
  box-shadow: 0 15px 15px rgba(255, 0, 0, 0.3);
  margin: 0 20px;
}

.card-final {
  padding-right: 70px;
}

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card-final"></div>
</div>

【讨论】：