CSS Flex Justify-content 不要将元素推到每个 Angular 落

Question

嗨，我想像 float 实际做的那样将 2 个元素推到每个 Angular 所以我给父显示 flex 和 justify-content，之间的空间，但它似乎在第一个元素之前留有边距，在最后一个元素之后有边距。在这个例子中，header 是父元素，h1 是第一个元素，nav 是最后一个元素。我希望 h1 保持在左侧，nav 保持在右侧并显示 flex。

HTML

        <header>
            <h1>Thermos</h1>
            <nav>
                <a href='#'>Add URL</a>
                <a href='#'>Sign Up</a>
                <a href='#'>Sign In</a>
            </nav>
        </header>
        <main>
            <section id='main'>
                <div id='intro'>
                    <h1>Welcome</h1>
                    <p>Thermos is a simple social bookmarking site. Or actually, you can use it the way you want.</p>
                </div>
                <article>
                    <h2>Article section h2</h2>
                    <p>Qui ne magna delenit splendide, diam ullum regione vis no, an modo numquam eum. Ne ullum clita libris vel. In tantas graeci molestiae eam, ei sed aeterno aperiri fabulas. Quo eu quod dicta, nec sint expetenda eu. Aeque nobis verterem ea cum, sed no hinc salutandi consetetur. Volumus assueverit in qui, commodo nominavi ad pro.</p>
                </article>
                <article>
                    <h2>Article section h2</h2>
                    <p>Qui ne magna delenit splendide, diam ullum regione vis no, an modo numquam eum. Ne ullum clita libris vel. In tantas graeci molestiae eam, ei sed aeterno aperiri fabulas. Quo eu quod dicta, nec sint expetenda eu. Aeque nobis verterem ea cum, sed no hinc salutandi consetetur. Volumus assueverit in qui, commodo nominavi ad pro.</p>
                </article>
            </section>
            <aside>
                <h3>Aside</h3>
                <p>Dico tantas definiebas eum ad, nostrum reprimique duo no. Ut pri causae ponderum, ea per erat facilisis. Ad clita utroque vel, in stet animal meliore per. An audire ponderum disputando usu, eu nam ipsum clita menandri, cu tempor maiestatis persequeris quo.</p>
            </aside>
        </main>

CSS

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,
samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
*,*:before,*:after{box-sizing:inherit}
*:before,*:after{content:''}
html{box-sizing:border-box}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul,ul li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:inherit}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

html, body {
    font-family: Lato;
    font-size: 16px;
}

header {
    background-color: #FB7524;
    color: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 20px solid #D74411;
    margin-bottom: 30px;
}

header > * {

    }

header > h1 {
    font-size: 2rem;
    font-weight: 700;
    align-self: center;

}

nav {
    font-size: 0;
}

nav > a {
    font-size: 1.1rem;
    display: inline-block;
    width: 100px;
    padding: 40px 0;
    text-align: center;
    margin-left: 10px;
    background-color: #D74411;
}

nav > a:first-child {
    margin-right: 0;
}

main {
    display: flex;
    justify-content: space-between;
}

section#main {
    width: 60%;
    margin-left: 40px;
}

section#main #intro {
    margin-bottom: 30px;
}

section#main #intro h1 {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 10px;
}

section#main #intro p {
    font-size: 1.1rem;
}

section#main article {
    margin-top: 20px;
}

section#main article h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 10px;
}

section#main article p {
    font-size: 1.1rem;
    text-align: justify;
}

aside {
    transition: 0.3s all ease-out, margin 1ms,
                bottom 0.2s;
    width: 30%;
    min-width: 300px;
    max-height: 300px;
    margin: 0 40px 0 20px;
    background-color: #FB7524;
    border-top: 20px solid #D74411;
    padding: 20px;
}

aside h3 {
    font-size: 1.3rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
}

aside p {
    font-size: 1.1rem;
    color: #fff;
    text-align: justify;
}

@media (max-width: 750px) {
    aside {
        height: 200px;
        width: auto;
        margin: 0;
        position: fixed;
        bottom: -100px;
        opacity: 0.3;
    }

    aside:hover {
        bottom: 0;
        opacity: 1;
    }
}

这是一个 JSFiddle .

Answer 1

你给你的元素一个空内容 :before & :after 这会打乱你的样式。将它们应用于每个元素是否有特殊原因？

删除 :before 和 :after 它应该按预期工作。

CSS

*:before,*:after{content:''} /* Remove this */

JSFiddle

---

为什么会这样？

因为 :before 和 :after 在你的 flex 容器中，它看到 4 个元素而不是你想要应用样式的 2 个元素。我创建了一个正在发生的事情的例子:

示例: Extra in-flow elements (your issue)