我有一个CSS3 flexbox的问题。
如果我将flexbox元素设置为overflow
并为子节点设置min-width
值,则父节点上的右边填充将丢失?这在所有支持浏览器上都是一致的。
这是一个错误的例子。如果滚动到容器的右侧,您将看到最后一个孩子难以抵靠容器的右边缘,而不是遵守填充值。
.outer {
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border:1px #ccc solid;
overflow-x: auto;
padding: 5px;
}
.outer > div {
flex: 1 1 auto;
border: 1px #ccc solid;
text-align: center;
min-width: 50px;
margin: 5px;
}
<div class="outer">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
<div>text7</div>
<div>text8</div>
<div>text9</div>
<div>text10</div>
</div>
有谁知道这是为什么以及如何纠正它?我已经把padding
和margin
的价值观弄得不同,但没有成功。
如果你想在末尾同时使用带有可滚动填充的“overflow-x:auto”,你需要添加另一层包装。
像这样的东西:
.scroll {
overflow-x: auto;
width: 300px;
border:1px #ccc solid;
}
.outer {
display: flex;
flex-direction: row;
box-sizing: border-box;
min-width: 100%;
height: 80px;
padding: 5px;
float: left; /* To size to content, & not be clamped to available width. (Vendor-prefixed intrinsic sizing keywords for "width" should work here, too.) */
}
.outer > div {
flex: 1 1 auto;
border: 1px #ccc solid;
text-align: center;
min-width: 50px;
margin: 5px;
}
<div class="scroll">
<div class="outer">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
<div>text7</div>
<div>text8</div>
<div>text9</div>
<div>text10</div>
</div>
</div>
或者,可以使用伪元素创建边距:
.outer::before { content: ' '; min-width: 5px; }
.outer::after { content: ' '; min-width: 5px; }
.outer {
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border:1px #ccc solid;
overflow-x: auto;
padding: 5px;
}
.outer::after { content: ' '; min-width: 5px; }
.outer > div {
flex: 1 1 auto;
border: 1px #ccc solid;
text-align: center;
min-width: 50px;
margin: 5px;
}
<div class="outer">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
<div>text7</div>
<div>text8</div>
<div>text9</div>
<div>text10</div>
</div>