Trying to align flex items to bottom, but instead they're aligning to first line of text

Question

I'm trying to align at the bottom several div inside another one. It work easily with flex with divs containing an image but if I put a text long enough to go on several lines then all divs are aligned with the first text line.

I made a fiddle to see: 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>

Try `.liste { align-items: flex-end; }` – Mohammad Usman May 01 '18 at 09:08 — Mohammad Usman, May 01 '18 at 09:08
You're true, how can't I have tried that... Thanks ! – Entretoize May 01 '18 at 09:12 — Entretoize, May 01 '18 at 09:12

score 0 · Accepted Answer · answered May 01 '18 at 09:12

0

you can flex the images or to the end of long text

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

OR to the center:

align-items: center;

answered May 01 '18 at 09:12

לבני מלכה

15,925
2
23
47

score 0 · Answer 2 · answered May 01 '18 at 12:53

With align-items: baseline you're telling all items to use baseline alignment, which lines them up along the first line of their content (either text or image, in this case).

If you want the items aligned across the bottom of the container, then use 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>

More here:

Trying to align flex items to bottom, but instead they're aligning to first line of text

2 Answers2