プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

【CSS】Flexboxとは?使い方の基本を解説【画像で分かりやすく解説します】

吹き出しくん

Flexboxを学びたいけど、どこから勉強すれば良いか分からない・・・。サクッと学びたいな。

こんな悩みをもっているあなたへ。

本記事では、現役でWEB制作をしている僕がFlexboxの基本的な使い方とよく使うものを厳選して解説していきます。

これからFlexbox学ぶ方、実用的な事を学びたい方には必見です。

古い教本や記事にはfloatなどが書いてありますが、Flexboxを覚えたらfloatはほとんど不要になりますので、これからWEB制作を学ぶ方はFlexboxを学びましょう。

僕について

新卒でWEB制作会社に入社して、現在はフリーランスとして生きています。

それではいきましょう。

Flexboxとは

Flexbox(フレックスボックス)は、要素を横に並べたり、縦に並べたりする為に使用するCSSになります。スマホ対応、レスポンシブデザインが主流になった今ではフレックスボックスを使用する事で簡単にスマホ対応にする事ができます。

以前は、要素を横に並べる時などはfloatを使用していましたが、現在はfloatを使うよりもFlexboxを使用する事が多くなってきています。

僕もWEB制作会社で働いていましたが、20代、30代のエンジニアの方はみんなFlexboxを使用してコーディングをしていました。一部40代の方でfloatを使用している人もいました。

とはいえ、トレンドは「Flexbox」で主流になってきています。これからCSSを学ぶ方で横並びのレイアウトを作る時は、floatではなくFlexboxを使用していくのが今時だと思います。

Flexboxの使い方を解説【これだけ覚えておけばOKです】

flexboxの使い方を解説

実際にFlexboxの使用方法について解説していきます。

この記事で解説する事以外にもFlexboxの使い方はありますが、本記事で解説している事だけを抑えておけば、ほとんどのコーディングでカバーできる内容となっています。

ここからは下記のようなHTMLコードを想定して解説していきます。CSSは省きますね。

HTML
<ul class="flex_container"> <li class="flex_items">要素1</li> <li class="flex_items">要素2</li> <li class="flex_items">要素3</li> <li class="flex_items">要素4</li> <li class="flex_items">要素5</li> </ul>

完成イメージ

完成イメージ

親要素(コンテナ)に「flex_container」、子要素(並べたいモノ)に「felx_items」というクラス名をつけています。クラス名は何でも大丈夫なのですが、このようにコンテナーを作ってその中に並べたい要素を入れていくイメージ。

上記が基本の形になります。横に並べたい要素がある時は、HTMLを書いている段階でFlexboxが使えるようにコンテナで囲っておきましょう。

display:flex;で横並びにする事ができる

まずはフレックスボックスの基本的な使い方を解説していきます。簡単。

CSS
.flex_container{ display: flex; }

上記の親要素にdisplay: flex:をあてるだけで子要素を横並びにする事ができます。そうしたら下記の画像のようになります。

display: flex;

とっても簡単ですよね。親要素にdisplay: flex;をあてるだけ横並びの完成になります。

ここからは、親要素にさらにプロパティを追加していく事でデザインを変えていく事ができます。下記で解説していきます。

flex-directionの使い方

flex-directionは要素を並べる方向を変える事ができるプロパティです。

要素の並べる方向を縦にしたり横にしたい逆方向にしたりする事ができます。directionは英語で「方向」という意味なのでその通りです。

使い方の下記の通り。

  • flex-direction: column;(縦)
  • flex-direction: column-reverse;(縦の逆)
  • flex-direction: row;(横)
  • flex-direction: row-reverse;(横の逆)

上記の4つを親要素にあてる事で、並べる方向を変える事ができます。順番に解説していきます。

flex-direction: column;(縦)

flex-direction: column;

CSS
.flex_container{ display: flex; flex-direction: column; }

column=カラム、縦列という意味です。

プログラミング全般に言える事ですが、英語の意味を理解すると覚えるのも早いです。今回はcolumnですので、Flexboxの並びを縦方向にしています。

こんな感じで画像を見せながらサクッと解説していきます。

flex-direction: column-reverse;(縦の逆)

flex-direction: column-reverse;

CSS
.flex_container{ display: flex; flex-direction: column-reverse; }

column-reverse=カラムリバース、縦列の反対という意味です。

画像のように先程のカラムとは逆の順番で縦方向に並べる事ができます。reverse系は実務ではあまり出番がありませんが、何となくでいいので覚えておきましょう。

flex-direction: row;(横)

flex-direction: row;

CSS
.flex_container{ display: flex; flex-direction: row; }

row=ロウ、横列という意味です。

要素を横に並べる事ができます。とはいえFlexboxはデフォルトでflex-direction:row;になっているので、記述する必要はないです。

flex-direction: row-reverse;(横の逆)

flex-direction: row-reverse;

CSS
.flex_container{ display: flex; flex-direction: row-reverse; }

row-reverse=ロウリバース、横列の反対という意味です。

column-reverseと同様で横列を逆の順番で並べています。実務で1度だけ使った事がありますが、ほとんど使ってないです。

justify-contentの使い方

justify-contentは並べる要素の間や周りの間隔を変更するためのプロパティです。

並べたい要素同士の間や周りのmarginを自動で調整してくれる便利なプロパティです。使い方は下記の通りです。

  • justify-content: center;(真ん中)
  • justify-content: flex-end;(右寄せ)
  • justify-content: flex-start;(左寄せ)
  • justify-content: space-around;(周りの余白)
  • justify-content: space-between;(間の余白)

上記の5つが主に使用するモノです。順番に解説していきます。

justify-content: center;

justify-content: center;

CSS
.flex_container{ display: flex; justify-content: center; }

centerなので、真ん中に配置するという意味です。

上記の通りで、親要素にjustify-content: center;をあてる事で並べたい要素を中央寄せにする事ができます。

こんな感じで、justify-contenを使う事で要素の位置や間隔を自動で調整してくれるので、とても便利です。

justify-content: flex-end;

justify-content: flex-end;

CSS
.flex_container{ display: flex; justify-content: flex-end; }

end=終点、ここではコンテナの終点である右に寄せるという意味です。

簡単に右寄せにする事ができます。margin-left: auto;でも同じように右寄せにする事ができますね。

justify-content: flex-start;

justify-content: flex-start;

CSS
.flex_container{ display: flex; justify-content: flex-start; }

endの逆で、スタート地点という意味です。左寄せにする事ができます。

デフォルトで左寄せになっておりますので、記述必要はございませんが何となく覚えておきましょう。

justify-content: space-around;

justify-content: space-around;

CSS
.flex_container{ display: flex; justify-content: space-around; }

space-around=周りの間隔という意味です。

上記の画像を見れば分かりやすいと思いますが、要素の周りの余白を自動で均一にしてくれます。頻出ですね、よく使います。

justify-content: space-between;

justify-content: space-between;

CSS
.flex_container{ display: flex; justify-content: space-between; }

space-between=間の余白という意味です。

先程のspace-aroundと混同しがちなのですが、上記の画像のようにspace-betweenでは要素同士の間のみの余白を調整しているのがポイントになります。

space-aroundとspace-betweenはめちゃくちゃ便利なので、しっかりと抑えておきましょう。

align-itemsの使い方

align-itemsは縦軸の要素の位置を調整するためのプロパティです。

justify-contentが横軸を調整するモノだったのに対し、align-itemsは縦軸を調整する事ができます。使い方は下記の通りです。

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

上記の3つを使用していきます。

align-items: center;

align-items: center;

CSS
.flex_container{ display: flex; align-items: center; }

要素を上下中央に寄せる事ができます。

上記の画像のようにコンテナの高さを基準にして、要素を上下中央に寄せる事ができます。こちらも使用する場面が多いのでしっかりと覚えましょう。

align-items: flex-end;

align-items: flex-end;

CSS
.flex_container{ display: flex; align-items: flex-end; }

画像のようにコンテナの高さを基準にして、要素を下寄せにする事ができます。

align-items: flex-start;

align-items: flex-start;

CSS
.flex_container{ display: flex; align-items: flex-start; }

こちらも同じです。デフォルトで上寄せになっておりますが、align-items: flex-start;を使う事でコンテナを基準にして上寄せにする事ができます。

flex-wrapの使い方

flex-wrapは並べた要素を複数行に折り返す事のできるプロパティです。

今までは1行にのみ並べておりましたが、flex-wrapを使う事で複数行に折り返す事ができるようになります。

  • flex-wrap: wrap;
  • flex-wrap: wrap-reverse;
  • flex-wrap: nowrap;

上記の3つを使用します。シンプルです、

flex-wrap: wrap;

flex-wrap: wrap;

CSS
.flex_container{ display: flex; flex-wrap: wrap; }

wrap=包むという意味ですが、ここでは「折り返す」という意味で覚えましょう。

上記の画像のように要素が増えたり、複数行にしたい時などにflex-wrap: wrap;を使用すると複数行に折り返す事ができます。

要素が何個に増えようと自動で折り返してくれます。

flex-wrap: wrap-reverse;

flex-wrap: wrap-reverse;

CSS
.flex_container{ display: flex; flex-wrap: wrap-reverse; }

先程のflex-wrap: wrap;の反対方向に折り返す事ができます。

少し癖が強いので使う場面が少ないかもですが、こちらも何となく覚えておきましょう。僕は使用した事がないです。

flex-wrap: nowrap;

flex-wrap: nowrap;

CSS
.flex_container{ display: flex; flex-wrap: nowrap; }

flex-wrap: wrap;で折り返していたのを解除する事ができます。

レスポンシブデザインを作る時などに解除する場面がたまにありますので、何となく覚えておきましょう。

ここまで沢山解説してきましたが、一度に覚える必要はないです。Flexboxを使う時にその都度ググれば大丈夫なので、この記事ではFelxboxの使い方と便利さが伝わればと思います。

それでは。