Flexbox定位：一个项目在顶部，另一个在底部

Question

Flexbox定位：一个项目在顶部，另一个在底部

4

我有一个容器，里面有两个项目。我使用了flexbox来把它们居中，但是我想让其中一个在中间，另一个在底部，并且也要居中。

<section class="primary__section">
    <img class=" primary__section__logo " src=../img/logo_png.png alt=" ">
    <img class=" primary__section__scroll " src=../img/scroll.png alt=" ">
</section>

.primary__section {
    background: url("../img/photo_up.png") no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

&__logo {
    width: 260px;
}

- Patryk Dąbrowski

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-Cyrillus · Accepted Answer

您可以使用margin ：

.primary__section {
    background: url("../img/photo_up.png") no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
[alt="middle"]{
  margin:auto;
}
[alt=" bottom"] {
  margin:0 auto 0;
}
/* let's test and see where the middle stands */
body {
  margin:0;
  background:linear-gradient(to left, transparent 50%, rgba(0,0,0,0.2) 50%),
    linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50%)
}

<section class="primary__section">
    <img class=" primary__section__logo " src=../img/logo_png.png alt="middle">
    <img class=" primary__section__scroll " src=../img/scroll.png alt=" bottom">
</section>

测试并玩耍 http://codepen.io/gc-nomade/pen/VKqGQm，以找出是否高效或达成良好折衷。