Flexboxを使って ボタンを下側に揃えて配置する方法

Step1. Flexboxを使って高さを揃える

１）今回は「li」の高さを揃えたいので、その親要素ulに「display: flex;」を追加するだけ！
(高さを揃えるプロパティはalign-items: stretch;ですが、flexを使うと初期値で設定されているので省いてます。)
liが横並びになり、高さも揃います。

２）さらに、「justify-content: space-between;」を追加することで、ボックス間の余白を均等にしています。

  <ul>
    <li>
      <p class="photo"><img src="https://unsplash.it/180/120"></p>
      <p class="txt">テキスト</p>
      <p class="btn">詳しくはこちら</p>
    </li>
    <li>
      <p class="photo"><img src="https://unsplash.it/180/120"></p>
      <p class="txt">テキストテキストテキストテキスト</p>
      <p class="btn">詳しくはこちら</p>
    </li>
    <li>
      <p class="photo"><img src="https://unsplash.it/180/120"></p>
      <p class="txt">テキストテキストテキストテ キストテキストテキストテキストテキストテキス トテキストテキスト</p>
      <p class="btn">詳しくはこちら</p>
    </li>
  </ul>
  <!-- 装飾に関するCSSは省いています -->
  <style>
  ul {
    display: flex;
    justify-content: space-between;
  }

  li {
    width: 30%;
  }
  </style> 

• 

  テキスト

  詳しくはこちら

• 

  テキストテキストテキストテキスト

  詳しくはこちら

• 

  テキストテキストテキストテ キストテキストテキストテキストテキストテキス トテキストテキスト

  詳しくはこちら

Step2. ボタンを底辺で揃える

１）liに「display: flex;」を指定して、Flexアイテムにする。
２）「flex-direction: column;」を指定して、横並びになってしまった部分を縦積みにする。
３）.btn(ボタン)に「margin-top: auto;」を指定すると、下側に配置されます。

  <ul>
    <li>
      <p class="photo"><img src="https://unsplash.it/180/120"></p>
      <p class="txt">テキスト</p>
      <p class="btn">詳しくはこちら</p>
    </li>
    <li>
      <p class="photo"><img src="https://unsplash.it/180/120"></p>
      <p class="txt">テキストテキストテキストテキスト</p>
      <p class="btn">詳しくはこちら</p>
    </li>
    <li>
      <p class="photo"><img src="https://unsplash.it/180/120"></p>
      <p class="txt">テキストテキストテキストテ キストテキストテキストテキストテキストテキス トテキストテキスト</p>
      <p class="btn">詳しくはこちら</p>
    </li>
  </ul>
  <!-- 装飾に関するCSSは省いています -->
  <style>
  ul {
    display: flex;
    justify-content: space-between;
  }

  li {
    display: flex;
    flex-direction: column;
    width: 30%;
  }

  .btn {
    margin-top: auto;
  }
  </style>
  

• 

  テキスト

  詳しくはこちら

• 

  テキストテキストテキストテキスト

  詳しくはこちら

• 

  テキストテキストテキストテ キストテキストテキストテキストテキストテキス トテキストテキスト

  詳しくはこちら

これで完成です！！

まとめ

今回はよく見かけるレイアウトを作ってみましたが、Flexboxを使うと簡単にできちゃうことも多いです！
ぜひ使ってみてくださいね。