2019年11月07日

コンテンツ量が変化しても大丈夫!flexboxを使用してボタンを下部に揃える方法

お世話になっております。佐藤です。

今回はflexboxを使用してコンテンツの下部を揃える方法について書いていこうと思います。以下のようなデザインはよくある形だと思います。

flexboxを使用する事例とコンテンツが増えても下部のボタンを合わせる方法

Webサイトでよく見かけるリストを横並びにするデザイン

上のようなデザインに実装する際、flexboxを使用すると簡単に横並びにすることができます。

flexboxを使用した際の予想外のパターン

動的なサイトでタイトル部分や文章量によって以下のような形になることが多々あります。

ボタンの位置がコンテンツの分量によって異なってしまう例

こんな時はコンテンツを覆う要素に対して、flexboxを指定してあげれば簡単に解決できます。

HTML

<ul>
  <li>
    <h2>タイトル</h2>
    <p><img src="img/chara1.png" alt=""></p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキ 
    ストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ 
    キストテキストテキストテキストテキストテキストテキスト</p>
    <a href="" class="btn btn-primary">詳細をみる</a>
  </li>
  <li>
    <h2>タイトル</h2>
    <p><img src="img/chara2.png" alt=""></p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキ 
    ストテキストテキストテキストテキストテキストテキストテキスト</p>
    <a href="" class="btn btn-primary">詳細をみる</a>
  </li>
  <li>
    <h2>タイトル</h2>
    <p><img src="img/chara3.png" alt=""></p>
    <p>テキストテキストテキスト</p>
    <a href="" class="btn btn-primary">詳細をみる</a>
  </li>
</ul>

CSS

ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: space-between;
}
li {
  width: 33%;
  border: 1px #000 solid;
  padding: 15px;
  /* ここがきも */
  display: flex;
  flex-direction: column;
  /* ここがきも */
}
.btn {
  margin-top: auto;
}

li要素にもflexを指定し、そのままでは横並びになってしますので「flex-direction: column;」を指定することによって縦並びにすることが可能となります。また、ボタン要素に「margin-top: auto;」を指定することによりボタンを下部に固定することができます。

私自身もこの方法を知る前は「position: absolute」で固定していたのですが動的サイトやレスポンシブ対応となると支障をきたすことが多々ありました。この方法を知ってからは簡単で確実に下部に揃えることができるので重宝しています。

皆様もぜひご活用ください!