Пытаемся выровнять изгибаемые элементы по низу, но вместо этого они выравниваются по первой строке текста

Question

Я пытаюсь выровнять внизу несколько div внутри другого. Это легко работает с flex с div-элементами, содержащими изображение, но если я помещу текст достаточно длинный, чтобы поместиться в несколько строк, тогда все div-ы выровняются с первой текстовой строкой.

Я сделал скрипку, чтобы увидеть: https://jsfiddle.net/0cn1zatj/7/

.objet {
  position: relative;
  line-height: 0;
}

.image {
  border: 1px solid #aaa;
}

.liste {
  border: 1px solid #f00;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}

.texte {
  line-height: normal;
}

<div class="objet liste" id="dsk0">
  <div class="objet image" id="dsk0"><img src="http://www.skrenta.com/images/stackoverflow.jpg"> </div>
  <div class="objet" id="dsk1" style="width: 225.833px;height: auto;line-height:  0;vertical-align: top;" contenteditable="true">
    <div class="texte" style="
    vertical-align:  top;
">Texte qui parle de tout et de rien mais surtout de rien alors voici un peu plus de texte inutile juste pour voir la mise en forme de texte dans une div avec flex.</div>
  </div>

  <div class="objet image" id="dsk0"><img src="http://www.skrenta.com/images/stackoverflow.jpg" height="50"> </div>

  <div class="objet image" id="dsk0" height="100"><img src="http://www.skrenta.com/images/stackoverflow.jpg"> </div>
</div>

Answer 1

С align-items: baseline вы говорите всем элементам использовать базовое выравнивание , которое выравнивает их вдоль первой строки их содержимого (в данном случае текста или изображения).

Если вы хотите, чтобы элементы были выровнены по дну контейнера, используйте align-items: flex-end.

.liste {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  border: 1px solid #f00;
}

.image {
  border: 1px solid #aaa;
}

.texte {
  line-height: normal;
}

<div class="objet liste" id="dsk0">
  <div class="objet image" id="dsk0"><img src="http://www.skrenta.com/images/stackoverflow.jpg"> </div>
  <div class="objet" id="dsk1" style="width: 225.833px;height: auto;line-height:  0;vertical-align: top;" contenteditable="true">
    <div class="texte" style="
    vertical-align:  top;
">Texte qui parle de tout et de rien mais surtout de rien alors voici un peu plus de texte inutile juste pour voir la mise en forme de texte dans une div avec flex.</div>
  </div>

  <div class="objet image" id="dsk0"><img src="http://www.skrenta.com/images/stackoverflow.jpg" height="50"> </div>

  <div class="objet image" id="dsk0" height="100"><img src="http://www.skrenta.com/images/stackoverflow.jpg"> </div>
</div>

Подробнее здесь:

• В чем разница между flex-start и baseline?
• Почему моя текстовая область выше, чем ее сосед?
• Загадочное пустое пространство под тегом изображения

Answer 2

вы можете flex изображения или до конца длинного текста

.liste { 
align-items: flex-end; 
}

ИЛИ до центра:

align-items: center;