请看下面的小提琴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
)具有固定尺寸项目的弹性框。容器的justify-content
设置为center
。因为物品不能收缩并且比容器宽,所以它们开始溢出。
我的问题是内容溢出到左侧和右侧。有没有办法让内容合理化为中心但是一旦它开始溢出使得它就像justify-content
属性被设置为flex-start
,resp。让它只溢出到容器的右边?
答案 0 :(得分:21)
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>