CSS：使Flexbox的合理内容仅溢出到右侧

Question

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

现在，我想让我的孩子div居中，所以我使用justify-content: center。 这适用于少数儿童（蓝色矩形）

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

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

但由于我无法向左滚动，因此无法将屏幕左侧的儿童推向左侧。这是一个问题。

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

Answer 1

只需使用嵌套的flex容器，并为内部flex-container设置margin-left: auto和margin-right: auto。这将起作用，因为只有当我们有可用空间进行分配时，自动边距才有效。演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是jsFiddle来测试调整大小。