当flex项目溢出容器时，更改justify-content值 [英] Change justify-content value when flex items overflow container

问题描述

查看以下小提示 https://jsfiddle.net/27x7rvx6

CSS（ #test 是flexbox容器， .items 是其子代） / p>

  #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 设置为 center 。因为项目不能收缩，并且一起比容器宽，它们开始溢出。

我的问题是内容溢出到左边和右边。是否有一种方法使内容合理化为中心，但一旦它开始溢出，使它的行为像 justify-content 属性设置为 flex- start ，分别。

解决方案

justify-content

而是建议您使用 auto margin 。您可以使用它们居中：

在通过 justify-content 和 align-self ，
任何正的可用空间被分配到
维度中的自动边距。

溢出框忽略其自动边距，并在 end
direction。

例如，您可以将 margin-left：auto 设置为第一个flex项，将 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：''; / *插入伪元素* / margin：auto; / *让它将flex项目推到中心* /}。item {flex：0 0 50px; margin-right：10px;背景：蓝色; height：50px; border：2px solid black;}  

 < div class = test> < div class =item>< / div>< div class =item>< / div>< div class =item>< < 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 class =item>< / div>< div class =item>< / div>< div class =item>< / div>< / div>  

Look at following fiddle https://jsfiddle.net/27x7rvx6

The CSS (#test is flexbox container, and .items are its children):

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

There is a one line (nowrap) flexbox with fixed size items. The container has justify-content set to center. Because the items can't shrink and are together wider than the container they start to overflow.

My problem is that the content overflows both to the left and to the right. Is there a way to make the content justified to center but once it starts to overflow make it act like the justify-content property is set to flex-start, resp. make it overflow only to right of the container?

解决方案

justify-content is not the right approach to center because of the problem you describe.

Instead, I recommend auto margins. You can use them to center:

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

And they behave as you want with overflow:

Overflowing boxes ignore their auto margins and overflow in the end direction.

For example, you can set margin-left: auto to the first flex item and margin-right: auto to the last one, or insert ::before and ::after pseudo-elements.

.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值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！