【CSS】flexboxで3カラムのフッターを作る。真ん中の要素は中央揃え！

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

CSSのflexboxを使って、3カラムのフッターを作れるようになりたい
3カラムのコンテンツで真ん中の要素を中央揃えする方法が知りたい
ロゴ/コピーライト/リストメニューの構成のフッターをflexboxでコーディングしたサンプルコードが見たい

という方のお悩みを解決します！

サンプルを画像とCodePenで確認
真ん中の要素は中央揃えの3カラムフッターを作るコード
- HTML
- CSS
まとめ

サンプルを画像とCodePenで確認

この記事で紹介するコードを使用すると、以下のようなフッターを作ることができます！

▼▼▼

左がロゴ画像
真ん中はコピーライト
右がリストメニュー

上記のような構成のフッターです！！

真ん中の要素が中央にピタッと寄っているのが特徴です。

CodePenで、表示確認もしてみましょう〜

▼▼▼

See the Pen
oNbLjEb by 石森裕也 (@yuyaphotograph)
on CodePen.

画面幅が狭いのでクシャッとなってしまっていますが、CodePenのページへ移動してみていただければ先程の添付画像のように表示されます！

真ん中の要素は中央揃えの3カラムフッターを作るコード

HTMLとCSSのサンプルコードを紹介します！

HTML

<div class="Inner">
  <div class="Inner-Left">ロゴ</div>
  <div class="Inner-Center">&copy;Copyright2020 〇〇〇〇</div>
  <div class="Inner-Right">
    <div class="Inner-Right-Content">
      <a href="" class="Inner-Right-Content-Item">運営会社</a>
      <a href="" class="Inner-Right-Content-Item">利用規約</a>
      <a href="" class="Inner-Right-Content-Item">プライバシーポリシー</a>
    </div>
  </div>
</div><div class="Inner">
  <div class="Inner-Left">ロゴ</div>
  <div class="Inner-Center">&copy;Copyright2020 〇〇〇〇</div>
  <div class="Inner-Right">
    <div class="Inner-Right-Content">
      <a href="" class="Inner-Right-Content-Item">運営会社</a>
      <a href="" class="Inner-Right-Content-Item">利用規約</a>
      <a href="" class="Inner-Right-Content-Item">プライバシーポリシー</a>
    </div>
  </div>
</div>

CSS

.Inner{
  margin-left: auto;
  margin-right: auto;
  /* 最大幅指定 */
  max-width: 1200px;
  
  /* 子要素を横並び */
  display: flex;
  justify-content: space-between;
}
.Inner-Left{
  /* 横幅指定 */
  flex: 2;
  
  display: flex;
  align-items: center;
  background: #000;
  color: #fff;
}
.Inner-Center{
  /* 横幅指定 */
  flex: 1;
  
  display: flex;
  justify-content: center;
  align-items: center;
  background: #5bc8ac;
  color: #fff;
  font-size: 14px;
}
.Inner-Right{
  /* 横幅指定 */
  flex: 2;
  
  background: #000;
  color: #fff;
}
.Inner-Right-Content{
  /* 右寄せ */
  margin-left: auto;
  /* 最大幅指定 */
  max-width: 160px;
}
.Inner-Right-Content-Item{
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}

左と右の要素にはflex:2;を、中央揃えしたいコピーライトにはflex:1;をそれぞれ指定してあげるのが肝です！

レスポンシブのコードは省略しましたが、実際にそれをコーディングする際は、flex: 0 1 auto;で初期値に戻してあげて、width:100%を指定してあげましょう〜

そんで、親要素には折返しを許可するflex-wrap:wrap;を指定してあげればOKです(^^)