flexboxのdisplay:flexを使った際に、
子要素やボタンを下で揃えて配置する方法

2023.07.11
2019.05.15

一昔のfloatでレイアウトを組んでいた時代とは打って変わり、今では至る所にflexboxを使ってレイアウトデザインをすることが増えました。

そんなFlexboxを使ってコーディングをしていく際、入れ子構造的に作っていった場合、子要素であったり、画像＋テキスト＋ボタンといったようなレイアウトの場合、特に最後のボタンの位置がテキスト量などによってズレてしまうという事が起こります。

ボタンの位置がバラバラになると、特にボタンに色が付いているような場合、どうしても目移りしてしまうため、避けたいといった要望も増えますし見た目も統一感が無いため統一したくなります。

今回は、そんなflexboxでボタンを下揃えに配置する方法についてまとめています。

この記事の目次

そもそもどういう状況で使えるかをおさらい

実際にコーディングしていれば、あーあれね。とすぐにわかるかと思いますが、flexboxでボタンがズレるというのは下記の画像のようなことを言います。

この画像を全く同じ状況が確認できる実際のデモページも用意しておきましたので、合わせてご確認ください。

デモページ

画像やデモページを見てわかるように、黒ボタンの位置が、その上にあるテキストの量によって変わってしまい、ボタンの位置がずれてしまっています。

それならテキストの量を調整してしまえば良いのでは？というのもやや強引ではありますが、解決策の1つとしてはいけなくもないのですが、文字サイズや環境などはユーザーによって様々なため、必ずしも自分たちが見ている状況と同じとは限らないので、揃える設定があればしておくに越した事はありません。

実際のケースで実装したい内容というのは、下記の画像のような見た目・レイアウトのはずです。

ではこのように実装するためにはどうすれば良いか？というのを見ていきましょう。

flexboxでボタンを下揃えにする実装方法

では、実際にどうやれば良いかというのを見ていきましょう。
コーディングをしている中、よくこのケースで、あ、あれってどうやってたっけな？という感じでど忘れしてしまう事もあるので、自分用メモやコードスニペットで管理しておくと楽ですよ。

<div class="flex">
  <div class="flex-box">
    <h2>見だし見だし見だし</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    <a href="" class="lnkbtn">リンクボタン</a>
  </div>
  <div class="flex-box">
    <h2>見だし見だし見だし</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    <a href="" class="lnkbtn">リンクボタン</a>
  </div>
  <div class="flex-box">
    <h2>見だし見だし見だし</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    <a href="" class="lnkbtn">リンクボタン</a>
  </div>
</div>

.flex{
  display: flex;
  justify-content: space-between;
  margin: 50px 0px 0px;
}

.flex-box{
  display: flex;
  flex-direction: column;
  width: 32%;
  border: 2px #eee solid;
  border-radius: 10px;
}

.flex-box h2{
  padding: 5px 10px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background: #333;
}

.flex-box p{
  margin: 25px;
}

.flex-box .lnkbtn{
  display: block;
  width: 100%;
  max-width: 200px;
  margin: auto auto 30px;
  padding: 10px;
  color: #000;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  background-color: #ccc;
}

.flex-box .lnkbtn:hover{
  color: #fff;
  background-color: #333;
}

一部、装飾的なところも入っていますが、これらのHTML・CSSを設定することで、ボタンが下揃えになります。

デモページ