html - 如何以三种不同的方式对齐 flex 元素？

Question

所以，我想像上图那样对齐 flex-box 中的元素。

我的html如下:

<div class="flex-row">
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
  <div class="flex-item">
    <img src="/default.png">
  </div>
</div>

CSS 作为

   .flex-row {
      min-height: 400px;
      display: flex;
      align-items: flex-start;
   }

   .flex-item:nth-child(2) {
     align-items: center;
   }

   .flex-item:last-child {
      align-items: flex-end;
   }

Answer 1

使用align-self 而不是align-items

.flex-row {
  min-height: 300px;
  display: flex;
  width: 90%;
  margin: 1em auto;
  border: 1px solid red;
  justify-content: space-between;
}

.flex-item {
  height: 50px;
  background: lightblue;
  width: 100px;
}

.flex-item:nth-child(2) {
  align-self: center;
}

.flex-item:last-child {
  align-self: flex-end;
}

<div class="container flex-row">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>