web制作

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

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

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

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

flex-boxはCSSでレイアウトを整えるのにとても効果的な手法の一つです。

使用できるプロパティは多くありますが、今回はflex-boxで横並びにした要素の一番下の要素を下に揃える方法を紹介します。

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

Web制作をしたことがある方であれば、このようなレイアウトを経験したことがあるかと思います。

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

<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アイテムの下要素を揃える方法

それでは、手順を解説していきます。

この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内で最後の要素に自動的に余白を確保し、一番下まで押し下げる指定です。これにより、テキスト量が異なっても最後の要素を下に揃えることができます。

ボタン要素が下位置で揃えられているのが分かりますね。これでデザイン面でも見栄えが良くなりました。

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

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

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

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

ぜひ活用してみてください。