flexbox基本編！要素を横並びにする方法

HTML/CSS

f:id:endoakak:20200725103757j:plain


この記事では、要素を横並びにするための手法、flexboxについて書いています。

ブロックレベル要素とインライン要素

HTMLの要素はブロックレベル要素とインライン要素の二種類に分けられます。ブロックレベル要素は一つのかたまりとみなされ、縦に積み重なっていきます。一方インライン要素は続けて書くと横に並びます。

例えばdiv要素はブロックレベル要素なので、縦に並びます。

<body>
  <div class="wrapper">
    <div class="content-A">A</div>
    <div class="content-B">B</div>
    <div class="content-C">C</div>
  </div>
</body>

f:id:endoakak:20200716093207p:plain:h200

一方a要素はインライン要素なので、横に並びます。

<body>
  <a href="#">link-A</a>
  <a href="#">link-B</a>
</body>

f:id:endoakak:20200716093234p:plain:h50

しかし、ブロックレベル要素でも横並びにしたいことがよくあります。そんなときに使うのが、flexboxです。

display: flex

flexboxとは、要素の配置をすることです。自由に要素の配置を変更するために必要なのが、displayプロパティです。横並びにしたい要素の親要素に「display: flex;」を指定することで、子要素は横並びになり、配置を変更することができます。

親要素wrapperに対してdisplay: flexを指定すると、子要素A, B, Cが横並びになります。

<div class="wrapper">
  <div class="content-A">A</div>
  <div class="content-B">B</div>
  <div class="content-C">C</div>
</div>

.wrapper {
  border: 1px solid black;
  display: flex;
}

f:id:endoakak:20200716093736p:plain:h100

縦の位置を決める「align-items」

親要素にdisplay: flexを指定することで、要素を横並びにできました。しかし、要素は左上につめて並んでいます。これらの要素を親要素の中心や下の端に並べるなど、縦の位置を変更できるのが、align-itemsプロパティです。 align-itemsの値には、flex-start, center, flex-endなどが入ります。

align-items: flex-start;
align-items: center;
align-items: flex-end;

先ほどの例で親要素にalign-items: centerを適用してみると、縦方向中央に移動しました。

.wrapper {
  border: 1px solid black;
  display: flex;
  align-items: center;
}

f:id:endoakak:20200716094641p:plain:h100

横の位置を決める「justify-content」

縦方向中央に要素を配置することができました。しかし、まだ左端に詰めて並んでいます。そこで今度は、横方向の配置を変更したいと思います。このような時は、justify-contentプロパティを使います。

flex-end

右端に詰めたいときに使います。

.wrapper {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

f:id:endoakak:20200716202407p:plain:h100

space-between

最初と最後の要素を両端に合わせ、残りは均等に配置します。

.wrapper {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

f:id:endoakak:20200716202615p:plain:h100

space-around

全ての要素を均等な間隔で配置します。

.wrapper {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

f:id:endoakak:20200716202822p:plain:h100

まとめ

  • ブロックレベル要素は縦に並び、インライン要素は横に並ぶ
  • 親要素に「display: flex;」を与えることで、ブロックレベル要素でも横並びにできる
  • align-itemsプロパティで縦方向の配置を変更可能
  • justify-contentで横方向の配置を変更可能