Как выровнять изображение в нижней части div, используя flex?

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

Если вы просто измените свой CSS, то это сработает.Я добавил heigh:100%;, раскомментировал justify-content:flex-end; и переназначил .parent-container > div на div.img-container:

    .parent-container {
        display: flex;
    }

    div.img-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin: 0 10px;
        height: 100%;
        justify-content: flex-end;
        flex: 1;
    }

    img {
        width: 100%;
        justify-self: flex-end;
    }

Answer 2

Раскомментируйте justify-content: flex-end;и добавьте margin-top: auto в контейнере img

.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>

Answer 3

Оберните h3 и p в div контейнер и добавьте добавление justify-content: space-between; в .parent-container > div:

CSS:

.parent-container {
    display: flex;
}

.parent-container > div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 10px;
    justify-content: space-between;
    flex: 1;
}

HTML:

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