【flexbox / CSS】フレックスボックスでボタンを下に揃える方法【下揃え】

HTMLの例

<ul>
  <li>
    <p class="img"><img src="example.jpg"></p>
    <h4 class="title">小タイトル</h4>
    <p class="text">テキストテキストテキストテキストテキスト</p>
    <a class="btn" href="#!">詳しく見る</a>
  </li>
  <li>
    <p class="img"><img src="example.jpg"></p>
    <h4 class="title">小タイトル</h4>
    <p class="text">テキストテキストテキストテキストテキスト</p>
    <a class="btn" href="#!">詳しく見る</a>
  </li>
  <li>
    <p class="img"><img src="example.jpg"></p>
    <h4 class="title">小タイトル</h4>
    <p class="text">テキストテキストテキストテキストテキスト</p>
    <a class="btn" href="#!">詳しく見る</a>
  </li>
</ul>

 

CSS

ul {
  display: flex;
}

/* ulだけでなくliもflexに */
li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;/* flexで横並びになった要素を縦並びに */
}

a {
  display: block;
  width: 100%;
  margin-top: auto;/* ボタンを下に揃えるためボタンの上をautoに */
}