• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2018/05/17
書いた人:
rurippa!
カテゴリ:
CSS   Web制作
100,296 views

以前は、高さを揃えるためにjQueryを使ったり、cssで作るにしても少し手間がかかりましたが… Flexboxなら簡単に実装できるので紹介します。

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

以前は、高さを揃えるためにjQueryを使ったり、cssで作るにしても少し手間がかかりましたが…
Flexboxなら簡単に実装できるので紹介します。

今回は、コンテンツ量の異なるボックスを用意して、高さを揃える。
それから、ボックス内の下にボタンを配置するよくあるレイアウトをFlexboxで作ります。

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

flex_btn_img01

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

2)さらに、「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. ボタンを底辺で揃える

1)liに「display: flex;」を指定して、Flexアイテムにする。
2)「flex-direction: column;」を指定して、横並びになってしまった部分を縦積みにする。
3).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を使うと簡単にできちゃうことも多いです!
ぜひ使ってみてくださいね。


この記事を読んだ人はこんな記事も読んでいます