【解説動画あり】display:flexの使い方は？CSSで横並びレイアウトを作ってみよう！【サンプルコードあり】

皆さんこんにちは。どんぶラッコです。

今日は皆さんと一緒に CSSで横並びを実現する方法について学んでいきましょう！

結論から言うと、display:flexというものを使います

グランくん

なんか聞いたことがある気がする！

どんぶラッコ

CSSを学び始めると一回つまづくポイントですね。理解してしまえば全く難しくないですよ！

通常は縦並びになる

一緒に実例を見ながら解説していきましょう。

例えば、このようにdiv要素が縦に並んでいます。

どんぶラッコ

わかりやすいように class=”box” をあらかじめ用意しました！

HTMLは原則、上から下に順番に実装されていきます。なので今回も1,2,3 のブロックは縦に並んでいますね。

ただ、CSS とかをいじっていると、この1, 2, 3のブロックを横並びにしたいということあると思います。

そんな時に使うのが今回のテクニックです。横並びにするためにはまず、この1, 2, 3というdiv要素は縦ではなく横に並べてくださいね、という指示を出さなきゃいけません。

なのでまずはこの例にも書いてあるように、横並びにしたい要素をさらにdivタグで囲ってあげます。

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

どんぶラッコ

今回は .container というクラス名にしました

では、先ほど紹介した display:flex を .container に指定してあげましょう。

.container {
  display:flex;
}

横並びになりましたね！

これはつまり、”.containerクラス内の要素は横並びにしてくださいね”という指示を出していることになります。なので、この横並びが有効なのはこのコンテナの中だけです。なので、.container外に.boxdivタグをつけても、ちゃんと元通り縦並びになるということです。

擬人化するとこんな感じ。

justify-content … 横の配置方法を指定

flexを使って横並びにする方法について学びました。しかし、もっと色々とカスタマイズしたいというようなことがあると思います。なので、ここではその代表的なパターンについても一緒に見ていきたいと思います。

例えば、今は左寄せになっている要素を中央寄せにしたい場合は、justify-content:centerというものを使います。

.container {
  display:flex;
  /* 追記 */
  justify-content:center;
}

justify-content で center の他によく使われるものとしては、space-betweenがあります。書き換えてみましょう。

.container {
  display:flex;
  justify-content:space-between; /* 書き換える */
}

すると、いい感じに隙間を空けて配置してくれます。

このjustify-content:space-betweenはナビゲーションバーなどでよく使われまう。要素を二つにしてみると分かりやすいですかね。

2つだと、左端と右端に寄ってくれます。このパターンを使って、ナビゲーション左側にサービスのロゴ、右側にセッティングのボタンを並べるみたいな配置をしたりします。

他にもスペース系のものとしては justify-content:space-around なんていうものがあります。

.container {
  display:flex;
  justify-content:space-around; /* 書き換える */
}

これ space-between と似ていますが、違いは左側右側の端にも等間隔のスペースを空けてくれている点です。

“around”なので、周囲にスペースを空けてくれるんです。つまり、左右等間隔のスペースを空けた形で配置をしてくれます。記事の一覧とかを作る時とかによく使いますね。

align-items … 縦の配置方法を指定

ここまでは要素の横の並べ方について解説してきました。では、縦方向ついての指定ができないの？というと align-items というものを使うと指定ができます。

わかりやすいように .container に高さと背景色を指定します。

.container {
  display:flex;
  justify-content:space-around; 
  /* 追記 */
  width: 100%;
  height: 300px;
  background-color: #aaa;
}

今回は align-items:center を使ってみましょう。

.container {
  display:flex;
  justify-content:space-around; 
  width: 100%;
  height: 300px;
  background-color: #aaa;
  /* 追記 */
  align-items:center;
}

align-itemsにも justify-contentのような選択肢がありますが、今回は割愛します

どんぶラッコ

今はフレックスモデルを適用すると横並びになるけど、縦並びに対してフレックスモデルを適用する…というパターンもあるんだ。
その時に center以外も使ったりするよ！
[/chat

どんぶラッコ

この話はややこしくなるので今は覚えなくて大丈夫。 align-items:center だけおさえておこう！

flex-wrap:wrap … 要素の幅を保持

さて、もう一つ、重要なポイントがあります。今は要素が3つしかありませんが、さらにここに3つ要素を追加したらどうなるでしょうか？

グランくん

3つ追加したら…２列になるとか？

どんぶラッコ

そう思っちゃうよねー

正解はこちら。

画像のように詰め込もうとしてくれちゃうんです。これ、すごい便利な一方で、元々の200ピクセル幅を維持して欲しい場合もありますよね。

もしはみ出すようなことがあったら回り込んで、下に2列で表示して欲しいよっていうこと、ありますよね。

そういう時に使うのは flex-wrap:wrap です。早速指定してみましょう。

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

.container {
  display:flex;
  flex-wrap: wrap; /* 追記 */
}

そうすると想定通りに回り込みをしてくれることが分かると思います。

まとめ

改めてまとめておきます。

flexのプロパティは他にも色々あるんですけれども、まずはこの点だけ押さえておけば色々なレイアウトは実現できます。

ぜひ皆さんも試してみてください！

サンプルコード (CodePen)

See the Pen flexのサンプル by cha1ra (@cha1ra) on CodePen.

動画講義