html - 如何使用 flex 将图像对齐到 div 的底部？

Question

我有一个父容器，其中包含一些子元素，例如根据内容具有不同高度的段落。我正在尝试使用 justify-self: flex-end 将图像与垂直轴的底部对齐，因此它不会影响父容器中的其他元素并将图像放在父容器的底部，但它不起作用。

但是，当我使用 justify-content: flex-end 时，它起作用并将整个内容推到底部，但我只希望图像与底部对齐。我做错了什么，我该如何解决？

.parent-container {
    display: flex;
}
.parent-container > div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 10px;
    /*justify-content: flex-end;*/
    flex: 1;
}
.img-container {
    justify-self: flex-end;
}
.img-container img {
    width: 100%;
    justify-self: flex-end;
}

<div class="parent-container">
  <div>
    <h3>header 1</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>

  <div>
    <h3>header 2</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>

  <div>
    <h3>header 3</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>
</div>

JSFiddle:https://jsfiddle.net/TheAmazingKnight/upay1rod/

Answer 1

取消注释 justify-content: flex-end;并在 img 容器上添加 margin-top: auto

.parent-container {
    display: flex;
}
.parent-container > div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 10px;
    justify-content: flex-end;
    flex: 1;
}
.img-container {
    margin-top: auto;  /* added */
}
.img-container img {
    width: 100%;
    justify-self: flex-end;
}

<div class="parent-container">
  <div>
    <h3>header 1</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>

  <div>
    <h3>header 2</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>

  <div>
    <h3>header 3</h3>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <div class="img-container">
      <img src="https://place-hold.it/300x500">
    </div>
  </div>
</div>