CSS：使 Flexbox 的对齐内容仅向右溢出

Question

我在单个容器 div 中有一个动态数量的 div display: flex。

现在，我希望我的孩子 div 居中，所以我使用justify-content: center. 这适用于少数孩子（蓝色矩形）

但是对于更多的孩子，设置justify-content: center意味着孩子的 div 被推到越来越远的屏幕外（红色矩形）。

屏幕外向右推的孩子仍然可见，因为我可以向右滚动以查看最右边的孩子。

但是向左推到屏幕外的孩子是不可见的，因为我无法向左滚动。这是个问题。

所以基本上我想用它flexbox来居中它的孩子，但防止孩子被推离屏幕到左边。相反，内容应该向右溢出，这是justify-content: flux-start有效的方式，但仍应居中。

Answer 1

只需使用嵌套的弹性容器margin-left: auto并margin-right: auto为内部弹性容器设置和。这会起作用，因为自动边距仅在我们有可用空间可供分配时才起作用。演示：

.flex {
  display: flex;
}

.inner-flex {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

/* just styles for demo */
.flex__item {
  background-color: tomato;
  color: white;
  margin: 10px;
  padding: 10px;
}

<div class="flex">
  <div class="inner-flex">
    <div class="flex__item">One</div>
    <div class="flex__item">Two</div>
    <div class="flex__item">Three</div>
    <div class="flex__item">Four</div>
    <div class="flex__item">Five</div>
    <div class="flex__item">Six</div>
    <div class="flex__item">Seven</div>
  </div>
</div>

这是用于测试调整大小的jsFiddle。