【CSS】display: flex;とmargin: auto;を使って要素の高さを揃える方法

今回は、display: flex;とmargin: auto;を使って要素の高さを揃える方法について紹介します。

高さの違う要素を揃える時の参考にしてみてください。

【CSS】display: flex;とmargin: auto;を使って要素の高さを揃える方法

デモサイトはこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

ブロックの真ん中にあるダミーテキストの高さがそれぞれ違いますが、ボタンの高さが揃っていることが分かるでしょう。

今回はボタンの高さをいつでも揃うような実装方法を紹介します。

HTML

HTMLコードはこちら。

<div class="wrap">
    <div class="item">
        <div class="item__image">
            <img src="https://yujiromx.com/wp-content/uploads/2022/04/freelancer-g73d4de2a5_1280.jpg" alt="">
        </div>
        <h3 class="item__title">タイトルです</h3>
        <p class="item__text">
            ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。
        </p>
        <div class="button">
            <a href="">ボタン</a>
        </div>
    </div>
    <div class="item">
        <div class="item__image">
            <img src="https://yujiromx.com/wp-content/uploads/2022/04/freelancer-g73d4de2a5_1280.jpg" alt="">
        </div>
        <h3 class="item__title">タイトルです</h3>
        <p class="item__text">
            ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。
        </p>
        <div class="button">
            <a href="">ボタン</a>
        </div>
    </div>
    <div class="item">
        <div class="item__image">
            <img src="https://yujiromx.com/wp-content/uploads/2022/04/freelancer-g73d4de2a5_1280.jpg" alt="">
        </div>
        <h3 class="item__title">タイトルです</h3>
        <p class="item__text">
            ダミーテキストが入る予定です。ダミーテキストが入る予定です。ダミーテキストが入る予定です。
        </p>
        <div class="button">
            <a href="">ボタン</a>
        </div>
    </div>
</div>

親要素wrapの中にitemボックスを3つ用意しました。

CSS

CSSコードはこちら。

.wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.wrap .item {
  border: 1px solid black;
  padding: 15px;
  text-align: center;
  width: 32%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.wrap .item:not(:first-child) {
  margin-left: 2%;
}

.wrap .item__title {
  font-size: 22px;
  margin-top: 20px;
}

.wrap .item__text {
  font-size: 15px;
  line-height: 1.5;
  margin-top: 20px;
  text-align: left;
  margin-bottom: 15px;
}

.wrap .item .button {
  margin-top: auto;
}

.wrap .item .button a {
  display: inline-block;
  background-color: #264b67;
  color: #fff;
  padding: 15px 30px;
}

上記のコードの中で、ボタンの高さを揃える際には以下のコードがポイントとなります。

まずはボタンの親要素に当たるitemに対して「display: flex;」を指定して、「flex-direction: column;」で縦向きに戻します。

.wrap .item {
  border: 1px solid black;
  padding: 15px;
  text-align: center;
  width: 32%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

そして子要素のボタンであるbuttonに対して「margin-top: auto;」を指定することで、margin-topの高さを自動調整し、ボタンの高さが揃うという仕組みです。

フレックスボックスとmarginのautoを使うことで高さを揃えることができるのはかなり便利でした。

まとめ

以上が、display: flex;とmargin: auto;を使って要素の高さを揃える方法でした。

関連記事:

【CSS】画像の上をhoverしたらテキストが表示するようにする方法 CSSを使って自動でナンバリングする方法 【JS】フェードインのアニメーションで要素を表示させる方法 CSSCombの設定内容【視覚順】