【CSS小技】flexで最後の要素を一番下に揃える(コピペOK)

カード型の一覧だとフレックス(display: flex;)で作ることになりますが、カードの最後の位置を揃えるのに沼った事が。。。

メチャ簡単に出来たので、忘れないうちに( ..)φメモメモ

最後のテキストを下で揃える DEMO

• こっちは短いテキストで終わり ^^;

  最後の要素は同じ位置

• 内容があったりなかったり、テキストが増えたり減ったり、片方だけ長くなってしまう事もあるあるです _ _#

  ついでに段落も増えちゃったりしてw

  最後の要素は同じ位置

最後のテキストを下で揃える コード

.t6-flex {
  display: flex;
  align-items: stretch;
  column-gap: 3%;
}
.t6-flex li {
  flex: 0 0 48.5%;
  display: flex;
  flex-direction: column;
  border: solid 2px #ccc;
}
.t6-flex .cont {
  flex: 1 1 auto;
  padding: 15px;
}
.t6-flex p {
  margin-bottom: 15px;
}
.t6-flex .footer {
  padding: 15px;
  font-size: 18px;
  background-color: azure;
}

<ul class="t6-flex">
  <li>
    <p class="cont">こっちは短いテキストで終わり ^^;</p>
    <div class="footer">最後の要素は同じ位置</div>
  </li>

  <li>
    <div class="cont">
      <p>内容があったりなかったり、テキストが増えたり減ったり、片方だけ長くなってしまう事もあるあるです __#</p>
      <p>ついでに段落も増えちゃったりしてw</p>
    </div>
    <div class="footer">最後の要素は同じ位置</div>
  </li>
</ul>

コードの説明

重要なのは 緑文字 の部分だけ

• 親要素 → フレックスにして align-items: stretch; で高さが揃うようにしておく
• カード部分 → フレックスにして flex-direction: column; でカードの中身を縦並びにする
• 上側の要素 → 上側の高さが伸縮するように flex: 1 1 auto; をかける

これだけで、最後の class="footer" が下端に揃います^^v