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

看下面的小提琴 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)flexBox.容器将对齐内容设置为居中.因为物品不能收缩并且比容器更宽,所以它们开始溢出.

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

解决方法

由于您描述的问题,对齐内容不是正确的中心方法.

相反,我建议使用auto margins.您可以使用它们来居中：

Prior to alignment via 07001 and 07002,
any positive free space is distributed to auto margins in that
dimension.

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

Overflowing Boxes ignore their auto margins and overflow in the 07003
direction.

例如,您可以将margin-left：auto设置为第一个flex项,margin-right：auto设置为最后一个,或者insert :: 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>

原文地址：https://www.jb51.cc/css/215295.html