Question

嗨我想把2个元素推到每个角落，就像浮动实际做的那样所以我给父显示flex和justify-content，之间的空间但是看起来像第一个元素之前的边距和最后一个元素之后的边距。在此示例中，标头是父级，h1是第一个元素，nav是最后一个元素。我希望h1坚持在左侧，导航器向右移动，显示屏为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＆amp; :after这会弄乱你的风格。是否有一个特殊原因可以将它们应用于每个元素？

删除:before＆amp; :after它应该按预期工作。

<强> CSS

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

<强> JSFiddle

为什么会这样？

因为:before＆amp; {flex}容器内部:after，它会看到4个元素，而不是您希望应用样式的2个元素。我创建了一个正在发生的事情的例子：

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

Answer 2

您需要将标头设置为flex: 1。这应该删除不需要的边距，并允许所有灵活项目的长度相同，其内容：

header > h1 {
    flex: 1;
}

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

2 个答案: