WEBデザイン

要素の並び方をもっと自由にアレンジ!flexboxの基礎を分かりやすく解説!

(このページはプロモーションが含まれています。)

Webデザインやコーディングをしていて、各要素のレイアウトに戸惑ったことはありませんか?

プログラミングコードによるデザインは、ドラッグ&ドロップとは違い、思った位置に思った要素を持っていくのはなかなか難しいものです。

要素の配置指定は、従来floatによって行われることが主流でした。

しかし、最近はflexboxという手法をとることが増えてきています。flexboxを使うことで、かなり自由に要素を配置できるようになりました。

この記事では、flexboxの基本的な使い方を初心者でもわかるように解説していきます。

flexboxの基本的な考え方

flexboxの基本的な考え方を理解するには、並べたい要素を入れておく「箱」とその箱に入っている「各要素」というモデルを頭に思い浮かべることが早道です。

このとき箱をflexコンテナ―、箱の中の要素を flexアイテムと呼びます。

イメージしやすくするため、flexコンテナ―を金魚鉢、flexアイテムを金魚鉢の中の金魚と考えてください。

この金魚鉢は水の流れが横に設定されているため、最初金魚達は横並びに泳いでいます。

しかし、金魚鉢の水流設定を変えれば、金魚は縦に並んで泳いだり、中央によって泳いだりすることもできます。

また、金魚自体に命令を与えて金魚が泳ぐ順番を変えたりすることも可能です。

このようにflexコンテナ―とflexアイテムにそれぞれ命令を与え、配置を変えることができるのがflexboxの魅力です。

flexコンテナ―(金魚鉢)に与える命令はflexアイテム(金魚)全体にいきわたりますが、flexアイテム(金魚)に与える命令は、各アイテム個別に指定できるということも、なんとなく覚えておいてください。

flexboxの設定

ではさっそくflexboxを使ってみましょう。

まずflexコンテナ―とflexアイテムのコードを作成します。以下にHTMLコード例を上げておきます。class名はお好きなものを付けてください。

<div class="flex-container">
  <div class="flex-item1">アイテム1</div>
  <div class="flex-item2">アイテム2</div>
  <div class="flex-item3">アイテム3</div>
  <div class="flex-item4">アイテム4</div>
  <div class="flex-item5">アイテム5</div>
</div>

 

次にCSSコードを書いてみましょう。flexアイテムにしたい要素の「親要素」(ここではflex-container)にdisplay:flexを適用します。これだけで、flexboxの仕組みが出来上がります。

 

 .flex-container {
       display: flex;
   }

 

なお、flexコンテナ―の初期設定では、中身のflexアイテムは横に並びます。そのため、上のコードをブラウザーで表示すると、以下のようになります。

flexコンテナ―のプロパティ

まず、flexコンテナ―に適用できるプロパティについてみていきましょう。

flexアイテムの並び方を変えよう

flexアイテムの並び方を変えるにはflex-directionプロパティを使います。

  • flex-direction:row;     デフォルト値。アイテムは横並び。
  • flex-direction:row-reverse; アイテムは逆順に横並び。
  • flex-direction:column;    アイテムは縦並び。
  • flex-direction:row;      アイテムは逆順に縦並び。

分かりやすいようコンテナ―とアイテムに背景色等を設定すると、画像のようになります。

flexアイテムの折り返し

次にflexコンテナ―幅に収まり切らないflexアイテムがあった場合、折り返すかどうかを設定します。

これはflex-wrapで設定できます。

  • flex-wrap:nowrap;    デフォルト値。flexアイテムを折り返しません。
  • flex-wrap:wrap;    flexアイテムを折り返します。
  • flex-wrap:wrap-reverse;   flexアイテムを逆順に折り返します。

下図のflexアイテム(赤い部分)は200px、flexコンテナ―(水色の部分)は600pxです。

flexアイテム×5個は、本来ならflexボックス内に収まりません。こんなときflex-wrapの設定で見た目がどのように変わるのか、図で確認してみてください。

※flex-directionとflex-wrapはflex-flowというプロパティで同時指定できます。例えば、以下のコードではflexアイテムを縦並びにしつつ、折り返すことができます。

flex-flow:column wrap;
(flex-flow:wrap column;と書くことも可能)

横方向、縦方向の寄せ方

横方向の寄せ方はjustify-contentで、縦方向の寄せ方はalign-itemsで設定します。

横寄せ

  • justify-content:flex-start; デフォルト値。左寄せ。
  • justify-content:flex-end; 右寄せ。
  • justify-content:center; 中央揃え。
  • justify-content:space-between; 両端のflexアイテムは間隔を開けず、その間のflexアイテムは均等配置。
  • justify-content:space-around; すべてのflexアイテムを均等配置。

縦寄せ

  • align-items:stretch; デフォルト値。flexボックスの高さ(もしくは最も多いflexアイテムの高さ)に合わせて高さを引き延ばす。
  • align-items:flex-start; 上揃え。
  • align-items:flex-end ; 下揃え。
  • align-items:center; 中央揃え。
  • align-items:baseline; 文字のベースラインに合わせる。

複数行をまとめて動かす場合

複数行にわたるflexアイテムをまとめて垂直方向に動かすときは、align-contentという値を使います。

以下の画像はalign-itemsとalign-contentを使ったときの違いです。align-itemsを使うとバラバラになってしまう行が、align-contensだとまとめて動いているのが分かりますね。

★flexアイテムが複数行にわたる=折り返しが行われているのですから、align-contentを使う場合は、flexボックスのflex-wrapがnowrap以外になっているのが前提です。

align-contentには、align-itemsと同じように以下の値が使えます。

  • align-content:stretch; 広げる
  • align-content;flex-start; 上揃え
  • align-content;flex-end; 下揃え
  • align-content:center; 中央揃え

また各行の間を均等に空けるためには、次の値を使います。

  • align-content:space-between;  最初と最後のflexアイテムは端に寄せ、後は均等配置。
  • align-content:space-around;   すべてのflexアイテムが均等配置。

flexアイテムに使えるプロパティ

次にflexボックスの中身、flexアイテムに使えるプロパティを見ていきましょう。

アイテムの順番を変える

まずは、flexアイテムの順番を変えるorderです。任意のflexアイテムにorderプロパティを付けるとその順番に移動します。

例えば以下のコードを使うと、本来3番目に入力されている「アイテム3(class名はflex-item3)」を5番目に移動させることができます。

.flex-item3{order:5;}

アイテムの比率を変える

各アイテムの比率を変えるのが、flex-growとflex-shrinkです。

指定した比率に拡大するflex-grow

flex-growは、flexアイテムを指定した比率に拡大できます。※flexコンテナ―の幅に余裕がある場合

例えば、以下の画像では親要素のflexコンテナ―に余裕があります。

そこで、各flexアイテムに以下のようなコードを設定します。

.flex-item1{flex-grow: 9;}
.flex-item2{flex-grow: 4;}
.flex-item3{flex-grow: 1;}

flexボックスの余白を埋める形で、各アイテムは指定した比率に広がります。

指定した比率に縮めるflex-shrink

flex-shrinkはflex-growの逆です。flexアイテムがflexボックスにおさまらない時に、各アイテムをどのような比率で縮めるのかを指定します。

.flex-item1{flex-shrink: 9;}
.flex-item2{flex-shrink 4;}
.flex-item3{flex-shrink 1;}

上のコードを実行した結果が下図です。flex-growsと反対の結果になっているのが分かると思います。

flexボックスには縦横の区別がない?

flexアイテムに適用できるプロパティとして、最後にflex-basisを紹介します。これは、flexアイテムの大きさを決める値です。

大きさというのは、幅のこと?高さのこと?と疑問に思う人もいるかもしれませんね。

これはflexコンテナ―(親要素)のflex-directionの値によって変わります。

flexコンテナ―のflex-direcitonがrowならflexアイテムのflex-basisは幅を決める値になります。つまりwidthと同じ意味を持つことになります。

逆にflexコンテナ―のflex-direcitonがcolumnならflexアイテムのflex-basisは高さを決める値になります。つまりheightと同じ意味を持つことになります。

試しに、以下のコードを実行してみましょう。

.flex-container {flex-direction: row;}
.flex-item {flex-basis:100px;}

flexボックスの方向がrowに設定されているので、幅100pxのflexアイテムが並びます。

では、以下のコードではどうでしょうか。

.flex-container {flex-direction:column;}
.flex-item {flex-basis:100px;}

flexコンテナ―の方向がcolumnに設定されているので、高さ100pxのflexアイテムが並びます。

同じflex-basisというプロパティですが、flex-directionの方向によって幅指定にも高さ指定にも使えることを覚えておくと良いでしょう。