当flex项溢出容器时更改justify-content值

Question

请看下面的小提琴https://jsfiddle.net/27x7rvx6

CSS(#test是flexbox容器,.items是它的子容器):

#test {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 300px;
  margin-left: 150px;
  border: 2px solid red;  
}
.item {
  flex: 0 0 70px;
  margin-right: 10px;
  background: blue;
  height: 70px;
  border: 2px solid black;
}

有一个nowrap带有固定大小项目的line()flexbox.容器已justify-content设置为center.因为物品不能收缩并且比容器更宽,所以它们开始溢出.

我的问题是内容溢出到左侧和右侧.有没有办法让内容合理化为中心,但一旦它开始溢出使其行为就像justify-content属性设置为flex-start,resp.使它只溢出到容器的右边？

Answer 1

justify-content 由于您描述的问题,不是正确的中心方法.

相反,我推荐auto边距.您可以使用它们居中:

在通过justify-content和进行对齐之前align-self,任何正的自由空间都会分配到该维度中的自动边距.

他们的行为与你想要的溢出:

溢出的框忽略了它们的自动边距并在最终 方向溢出.

例如,您可以设置margin-left: auto为第一个弹性项目和margin-right: auto最后一个弹性项目,或插入::before和::after伪元素.

.test {
  display: flex;
  flex-flow: row nowrap;
  width: 200px;
  border: 2px solid red;
  margin: 10px;
}
.wide.test {
  width: 500px;
}
.test::before, .test::after {
  content: '';  /* Insert pseudo-element */
  margin: auto; /* Make it push flex items to the center */
}
.item {
  flex: 0 0 50px;
  margin-right: 10px;
  background: blue;
  height: 50px;
  border: 2px solid black;
}

<div class="test">
  <div class="item"></div><div class="item"></div><div class="item"></div>
  <div class="item"></div><div class="item"></div><div class="item"></div>
</div>
<div class="wide test">
  <div class="item"></div><div class="item"></div><div class="item"></div>
  <div class="item"></div><div class="item"></div><div class="item"></div>
</div>

Answer 2

您可以使用：

align-items: safe center;
justify-content: safe center;

ps Safari不支持这些道具