Question

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）具有固定尺寸项目的弹性框。容器的justify-content设置为center。因为物品不能收缩并且比容器宽，所以它们开始溢出。

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

Answer 1

由于您描述的问题，

justify-content不是正确的中心方法。

相反，我建议auto margins。您可以使用它们居中：

在通过justify-content和align-self进行对齐之前，任何正的自由空间都会分配到汽车边距尺寸。

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

溢出的框忽略了end中的自动边距和溢出方向。

例如，您可以将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>

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

1 个答案: