Question

我遇到了CSS3 flexbox的问题。

如果我将flexbox元素设置为overflow并为子项设置min-width值，则父项上的右侧填充会丢失？这在所有支持的浏览器上都是一致的。

以下是错误示例。如果滚动到容器的右侧，您将看到最后一个孩子难以对着容器的右边缘，而不是遵守填充值。

＆＃13;

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

＆＃13;

<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>

＆＃13;

有谁知道这是为什么以及如何纠正它？我使用不同组合的padding和margin值混乱而没有成功。

Answer 1

如果你想同时拥有＆＃34; overflow-x：auto＆＃34;你需要添加另一层包装。最后用可滚动的填充。

这样的事情：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

或者可以使用伪元素创建边距：

.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>

Answer 3

ArthurKäpp和dholbert的解决方案都在起作用。但是，如果您选择在主伸缩框中使用任何“对齐项目”（接受拉伸），它将再次断裂。我花了一段时间，但最终我准备了一个效果很好的解决方案。

此解决方案使用伪元素：

while len(s) < j + 1:
    s = np.append(s, mu)

.outer {
    display: flex;
    flex-direction: row;
    width: 300px;
    height: 80px;
    border:1px #ccc solid;
    overflow-x: auto;
    padding: 5px;
    align-items: center;
    position: relative;
}
.outer > div {
    flex: 1 1 auto;
    border: 1px #ccc solid;
    text-align: center;
    min-width: 50px;
    margin: 5px;
}

.outer > div:last-child::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 10px;
    display: inline-block;
    margin-left: 10px;
}

请注意，在某些情况下，左边距为：10像素在伪元素中不起作用。您可以使用一个权利：-10px也可以。

Answer 4

还有另一种方法：您可以使用另一个DIV项目-flex-> TEXT_11，然后根据需要设置MarginLeft = PaddingRight

<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 style="margin-left: 5px" class="TEXT_11">&nbsp;</div>

</div>

显示：Flex溢出时会失去正确的填充？

4 个答案: