css - flexbox 显示会改变边距宽度吗？

Question

我在使用 flexbox(当前版本或显示:flex；)时的边距似乎翻了一番，我不明白为什么。页面上各部分之间的所有其他边距显示为 10px，因为它们已设置，但 flexbox 内容的边距显示大约两倍。我已经尝试将包装器 div (#output) 设置为 margin: 0px;和填充:0px；但这没有任何效果。这是 flexbox 的“特性”吗？还是我的 CSS 的边距/填充设置有问题？

HTML:

<div id="all_content">
    <section id='search_box'>
        <h1>Auto Primer</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <div id="output">
        <nav id='user_input'>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </nav>

        <section id='gene_selected'>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </div>

    <section id='primers'>
        <h2>Primers</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <section id='how_to'>
        <h2>How To Use Auto Primer</h2>
        <p><span id="form_out"></span></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
</div>

CSS:

div#all_content {
    width: 1200px;
    margin: 0 auto;
    padding: 0px;
}

section#search_box {
    padding: 10px;
    margin: 10px;
    background: #ebf4fb;
    border:2px solid #b7ddf2;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

div#output {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

nav#user_input {
    background: #ebf4fb;
    border: 2px solid #b7ddf2;
    width: 275px;
    padding: 10px;
    margin: 10px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

section#gene_selected {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 10px;
    margin: 10px;
    background: #ebf4fb;
    border: 2px solid #b7ddf2;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}
section#primers {
    padding: 10px;
    margin: 10px;
    background: #ebf4fb;
    border: 2px solid #b7ddf2;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

section#how_to {
    padding: 10px;
    margin: 10px;
    background: #ebf4fb;
    border: 2px solid #b7ddf2;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

编辑:我设法通过给左 flex 元素让边距看起来一样:边距:0px 5px 0px 10px；和正确的 flex 元素:边距:0px 10px 0px 5px；而不是边距:10px；与页面上的所有其他元素一样。虽然这行得通，但我仍然对 flexbox 这样做的原因有些困惑。

编辑:这是一个演示问题的 jsfiddle:fiddle .进一步更新和简化。

Answer 1

问题是边距在并排的 flex 部分应用了两次。您可以通过简单地在并排元素之间正确分配边距来解决此问题。

基于 CSS3 定义:
http://www.w3.org/TR/css3-flexbox/#item-margins

相邻 flex 元素的边距不会折叠。 自动边距吸收相应维度的额外空间，可用于对齐和将相邻 flex 元素推开；请参阅与“自动”边距对齐。

这就是您的情况，并排 flex 元素的边距不会折叠，但在您的其他 flex 元素上，它们确实会折叠，因此边距不会在这些 flex 元素上应用两次。