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会这样做。

修改这是一个证明问题的方法：fiddle。进一步更新和简化。

Answer 1

问题在于边缘柔性部分应用了两次边距。您可以通过简单地在并排元素之间正确分布边距来解决此问题。

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

相邻弹性项目的边距不会折叠。自动边距会吸收相应尺寸中的额外空间，并可用于对齐并将相邻的弹性项目分开;请参阅与“自动”边距对齐。

在您的情况下会发生这样的情况，即并排弹性项目的边距不会崩溃，但在其他弹性项目上，它们会崩溃，因此边距不会在这些弹性项目上应用两次。

flexbox显示是否会改变边距宽度？

1 个答案: