flex-boxで横並びした要素の一番最後だけを下に揃える方法【汎用性あり】

※当サイトは、アフィリエイト広告を利用しています
HTML/CSS
スポンサーリンク

web制作
web制作

・横並びの要素でテキスト量が異なると下に空白ができてしまう

・横並びのブロック要素の中身の最後の要素を下に揃えたい

こういったお悩みを解決していきます!

  • flex-boxで横並びしたアイテム用の一番下の要素を下揃えする方法

今回はflex-boxについての記事です。

flex-boxはcssでレイアウトを整えるのにとても効果的な手法の一つです。flex-boxで使えるコードはたくさんありますが、今回はflex-boxで横並びにした要素の一番下の要素を下に揃える方法をお伝えします。

スポンサーリンク

flex-boxで横並びした際に起こりがちな問題

web制作をしたことがる人ならばこのようなレイアウトをいくつも経験したことがあるかと思います。

flex-box横並び画像

コードはこんな感じです。

<div class="flex-box-wrap">
    <div class="flex-item">
        <h2>flex-box1</h2>
        <div class="img-wrap">画像</div>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
        </p>
        <div class="btn-box">
          <a href="#" class="btn-txt">ボタン</a>
        </div>
    </div>
    <div class="flex-item">
        <h2>flex-box2</h2>
        <div class="img-wrap">画像</div>
        <p>テキストテキストテキストテキストテキストテキストテキスト。</p>
        <div class="btn-box">
          <a href="#" class="btn-txt">ボタン</a>
        </div>
    </div>
</div>

このような横並びにした要素の高さは、一番高いものに揃えられますので、テキスト量などが異なるとこのように見た目的にイケてるとは言えなくなります。

ここで使えるのがflex-boxのテクニックです!

スポンサーリンク

テキスト量が違うflex-boxアイテムの下要素を揃える方法

では早速手順を解説していきます。

  1. flex-itemの要素に「display:flex;」を指定
  2. 「flex-direction: column」を指定
  3. flex-item内の一番最後の要素(今回はボタン)に「margin-top: auto」を指定

こちらの3ステップで最後の要素の下揃えができるようになります。

flex-itemの要素に「display:flex;」を指定

まず初めに横並びにした2つの「flex-item」にも「display:flex」を指定します。これによってflex-item要素にもflex-boxが適用できるようになりました。

しかしこれだけだと「flex-item」内の要素が横並びになりデザインが崩れてしまうので、追加のコードを記載します。

「flex-direction: column」を指定

次にflex-boxが適用された「flex-item」に「flex-direction: column」を指定します。これにより「flex-item」内の要素は縦並びになり最初とデザイン的には同じになりました。

flex-item内の一番最後の要素に「margin-top: auto」を指定

見た目的に最初と同じデザインになったところでついに最後の要素を下に揃えるコードを追加します。

今回は「flex-item」内の最後の要素はボタン要素の「btn-box」です。この要素に「margin-top: auto」を指定します。

こちらはflex-boxで横並びになった要素内で最後の要素を一番下になるまで自動的にmargin-topを付与するものでこれでテキスト量が異なっても最後の要素が下に揃えられました。

flex-box下揃え画像

ボタン要素が右側の位置に揃えられているのがわかりますね。これでデザイン的にも見栄えが良くなりました!

こちらは例えばテキスト量が変わったとしても一番要素内のテキスト量が多い「flex-item」に自動的に揃えられるため追加のコードを書くことはありません!便利ですね!

flex-boxで楽にデザインを再現できるようになろう

自分はこれを知らなかった頃は個別にmarginを与えてしまっており、テキスト量が変わったりレスポンシブコーディングをする際に余分なコードを書いてしまっていました。。

flex-boxを使うと楽に解決できるかつ、テキスト量が変更になった際も余白を自動的にとってくれるのでとてもスマートです。

皆さんも是非使ってみてください!!

エンジニアにおすすめ書籍

エンジニアになりたて、これから勉強を深めていきたいという方におすすめの書籍はこちら!

タイトルとURLをコピーしました