DK’s diary

プログラミング初学者による発信

Flexboxによる横並び

今回のテーマ

CSSで横並びにする方法は、前回紹介したfloat以外にもあります。今回はFlexboxを用いて以下の図を目標物として作成していきます。

f:id:dkdkdk3:20200404213048p:plain
完成図

Flexbox適用前

親要素にcontentsクラスを指定し、子要素にそれぞれleft、center、rightの３つのクラスを指定しました。

<html>
  <head>
    <meta charset="utf-8">
    <title>flex-box</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="contents">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.contents {
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  font-size: 30px;
  color: white;
  text-align: center;
}

.left {
  background-color: blue;
  height: 50%;
  width: 25%;
}

.center {
  background-color: red;
  height: 50%;
  width: 25%;
}

.right {
  background-color: green;
  height: 50%;
  width: 25%;
}

f:id:dkdkdk3:20200404220401p:plain
Flexbox適用前
子要素のheightを50%に指定してるのでrightが画面外になっていますが、きちんと存在しています。

Flexbox適用

子要素を横並びにするために、displayプロパティ、値はflexとして親要素に適用します。floatは横並びにしたいものに対して適用していましたが、Flexboxではその親要素にdisplayプロパティを適用するのが注意点です。この横並びにする機能の総称をFlexboxと呼びます。
以降は親要素のみのCSSを記載します。

.contents {
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  font-size: 30px;
  color: white;
  text-align: center;
  display: flex;
}

f:id:dkdkdk3:20200404223834p:plain
Flexbox適用後
上図のように横並びにすることができました！しかし各要素がくっついており、目標物とは少し違います。そこで次に横並びの種類を指定します。

横並びの種類

こちらも親要素に対して、justify-contentプロパティ、値はspace-aroundを適用します。

.contents {
  background-color: lightgrey;
  height: 100%;
  width: 100%;
  font-size: 30px;
  color: white;
  text-align: center;
  display: flex;
  justify-content: space-around;
}

f:id:dkdkdk3:20200404230821p:plain
justify-content適用後
目標物と同じになりました！
今回用いたspace-aroundは、両端の隙間：各要素間の隙間＝１：２にレイアウトを変えてくれます。他には、左寄せのflex-start、右寄せのflex-end、中央寄せのcenter、また今回の目標物の両端を空けずに各要素を等間隔にするspace-betweenなどがあります。
f:id:dkdkdk3:20200404232308p:plain
例：space-between

以上、Flexboxについての説明でした！