CSS：使 Flexbox 的 justify 内容仅向右溢出 [重复]答案

【问题标题】：CSS: Make Flexbox's justify content only overflow to the right [duplicate]CSS：使 Flexbox 的 justify 内容仅向右溢出 [重复]
【发布时间】：2018-01-07 06:37:15
【问题描述】：

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

现在，我希望我的子 div 居中，所以我使用 justify-content: center。这对少数孩子（蓝色矩形）非常有效

但是对于大量的子元素，设置justify-content: center 意味着子 div 被推离屏幕越来越远（红色矩形）。

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

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

所以本质上我想使用flexbox 将其孩子居中，但防止孩子被推到屏幕外的左侧。相反，内容应该向右溢出，就像justify-content: flux-start 的工作方式一样，但仍然居中。

【问题讨论】：

你能贴一些代码吗？
我不想冒着自我推销的风险在我的问题中提出这个问题，但这是针对我制作的客户端 Trello 克隆：reacto.surge.sh。在撰写本文时，我已将 justify-content 设置为 flux-start，并且我一直在尝试将我的列居中 :)

标签： html css flexbox

【解决方案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 来测试调整大小。

【讨论】：