html - 在顶部中心和底部中心对齐 flex 子项，flexbox

Question

我需要一个使用 flexbox 的布局，其中 2 个 flex 元素，item-1 应该在顶部居中对齐，而 item-2 应该在底部居中。我不知道该怎么做。

请看下面的代码:

.container{
  padding:10px;
  background: #fff;
  border-radius:5px;
  margin: 45px auto;
  box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1);
}

.item{
  color: #fff;
  padding: 15px;
  margin: 5px;
  background: #3db5da;
  border-radius: 3px;
}

.container{
  display: flex;
  min-height: 50vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.item{
  /*margin: auto;*/
  /*align-self: flex-start;*/
}

.item-4{
  align-self: flex-start;
}

<div class="container">
  <div class="item item-4">
    Flex Item
    <p>Vertical and horizontal align easy!</p>
  </div>
  <div class="item item-5"> bottom-center</div>
</div>

这是 fiddle 链接:https://jsfiddle.net/q5cw4xvy/

Answer 1

你正在寻找的是 justify-content: space-between; 来对齐元素直到 Angular 落。将其添加到 .container 即可。

.container{
    /*justify-content: center;*/
    justify-content: space-between;
}

在 .item-4 上你有 align-self: flex-start; 但你不需要它。只需将其删除即可。

https://jsfiddle.net/q5cw4xvy/2/

为了更好地帮助您理解 flexbox，有一个非常好的 css-tricks article .