display:flex;を使う理由について

Question

現在ECサイトの模写をしています。
リンク内容
メインのタイトル部分「TOTALLY Short Sleeve Shirt」のソースコードを確認したところ、下記のようにフレックスボックスを使用していました。

        <div class="item-image">
          <img src="img/item.jpg" alt="">
        </div>

        <div class="item-info">
          <h1 class="item-title">TOTALLY Short Sleeve Shirt</h1>
          <p>
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキスト
          </p>

#item .item-info .item-title {
  height: 60px;
  display: flex;
  align-items: center;
  border-top: solid 1px #c3c3c3;
  border-bottom: solid 1px #c3c3c3;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 20px;
}

何と横並びにしているのか分からず、デベロッパーツールで確認すると、タイトル部分と余白？をフレックスボックスを使って横並びにし、align-items:center;で中央揃えにしているようでした。

h1の上下に同じ数値（18pxなど）のpaddingをつけると、同じような形になるのですが、flexboxを使う理由が何かあるのでしょうか？
また、学習を行っている中、余白との横並びを実現するためにflexを使っているのを
初めて見ましたが、この使い方はよくある事なんでしょうか？

初心者のため、わかりやすく教えていただけると幸いです。よろしくお願いいたします。

Answer 1

h1の上下に同じ数値（18pxなど）のpaddingをつけると、同じような形になるのですが、flexboxを使う理由が何かあるのでしょうか？

18px は (60 - 16 * 1.5) / 2で計算したのだと思います。
height やフォントサイズなどを変更した時に計算し直さなくてよい、というメリットがあると思います。

---

余白との横並びを実現するためにflexを使っている

余白と横並びにしているわけではないと思います。フレックスアイテムはひとつなので、横並びも縦並びもないです。

---

この使い方はよくある事なんでしょうか？

縦中央をお手軽にできるので、よく使います。

Comments

[pckuma]

分かりやすいご回答ありがとうございました。
いくつかのフレックスアイテムを横並び縦並びにするため以外にも、今回のような使い方があるという事ですね。理解できました。

Answer 2

h1の上下に同じ数値（18pxなど）のpaddingをつけると、同じような形になるのですが

コーディングする時は通常デザインカンプを見ながら行うと思います。
paddingで形を揃えようとすると、文字から外側のborderまで何px離れているのか
いちいち計算しなければならず、面倒臭いのでflexとalign-items:centerで真ん中に揃えます。

Comments

[pckuma]

理解できました。簡単に縦中央揃えにするために行っているという事ですね。
とても分かりやすいご回答をしていただきありがとうございました。