0

使用 flexbox（当前版本或显示：flex;）时我的边距似乎翻了一番，我不知道为什么。页面上所有其他部分之间的边距显示为 10 像素，因为它们已设置，但用于 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 元素设法使边距看起来相同： margin: 0px 5px 0px 10px; 和右边的 flex 元素：margin: 0px 10px 0px 5px; 而不是边距：10px；就像页面上的所有其他元素一样。虽然这行得通，但我仍然有点不知道为什么 flexbox 会这样做。

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

4

1 回答 1

1

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

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

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

这就是在您的情况下发生的情况，您并排的弹性项目的边距不会折叠，但在您的其他弹性项目上，它们确实会折叠，因此边距不会在这些弹性项目上应用两次。

于 2013-04-26T09:00:18.360 回答