ー 見出しに使える！水平線のひき方（flexbox編）ー

文字の左右に、水平線があるデザインってよくありますよね。
文字をspanで囲んだり、色々なやり方があるのですが…

htmlは触らずにするなら、flexboxを使うのがわかりやすいので紹介しますー！

水平線のひき方（flexboxを使った方法）

サンプル

サンプル

複数行になっても
大丈夫です

ソースコード

  <p class="sample">サンプルです</p>
  <p class="sample">複数行になっても<br>大丈夫です</p>
  

  <style>
    .sample{
      display: flex;  /* 横並びにする */
      align-items: center;  /* 垂直方向に中央 */
      text-align: center;  /* 文字のセンタリング(複数行になったとき用) */
    }


    /* 共通部分はまとめる */
    .sample::before,
    .sample::after{
      content:"";
      flex-grow: 1;  /* 線の伸び率 */
      border-bottom: 1px solid #333;
    }

    /* 左側の線 */
    .sample::before{
      margin-right: 10px;  /* 線と文字の間のスペース */
      padding-left: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
    }

    /* 右側の線 */
    .sample::after{
      margin-left: 10px;  /* 線と文字の間のスペース */
      padding-right: 15px;  /* 線の長さが、最低でも15px以上になるように余白をとる */
    }
  </style>
  

ポイント解説＆まとめ

左右の線の部分（::afterと::before）にflex-grow: 1;を記載する部分がポイントです！
これがないと、左右の線が伸縮してくれないので、忘れずにつけてくださいね。
↓※サンプルです

flex-growがないver

あとは、コード部分にコメントを入れているので、わかりづらいところは読んでみてください。

また、よく見るシリーズ（？）の紹介などもしていきますね。それでは、みなさん良いコーディングライフを〜(・ω・)ノ

参考記事

・flex-growプロパティの意味と使い方