入門10：【CSS/Flexbox】基本を抑えたい方へ・基礎知識とサンプル

CSSのFlexboxは要素を簡単に配置するためのプロパティです。複雑なコードを書かなくても要素を横並びに表示したり、並び順を指定して表示することができます。

Flexboxを使うとHTMLやCSSのコーディングの負担が軽減されるだけでなく、要素を隙間なく並べたデザインを簡単に再現できます。このページではサンプルを交えながらFlexboxの基礎知識について解説します。

Flexboxの基本

Flexboxとは

CSSのFlexboxはプロパティではなく仕組みの名前です。実は、CSSにはFlexboxというプロパティはありません。

Flexboxを使う方法

Flexboxレイアウトを使いたいときは、以下のようにdisplayプロパティにflexの値を設定します。

div { display : flex; }

親要素に対してdisplay:flex;を指定すると、その要素の中でFlexboxレイアウトが使えるようになります。

Flexboxのコンテナとアイテム

要素にdisplay:flex;を指定すると、その要素は自動的にFlexコンテナとして扱われます。Flexコンテナに内包される子要素はFlexアイテムと呼ばれ、難しい指定なしでも横並びでの表示や等間隔での表示が可能になります。

Flexboxでできること

Flexboxを使うと以下のようなレイアウトを簡単に実現できます。

この中で一般的なCSSと大きく異るのが、子要素の表示順を入れ替える機能です。通常、要素はHTMLで書いた順番に表示されます。ブロック要素は上から下へ表示され、インライン要素は左から右へ表示されます。

しかし、FlexBoxを使うと、上から下、左から右という法則を逆にすることができます。

Flexboxの分類

Flexboxは、親要素（Flexコンテナ）と子要素（Flexアイテム）を分けて考えると理解しやすいです。display:flex;を指定した要素はFlexコンテナとなり、内包される要素はFlexアイテムとなります。

Flexコンテナ用のプロパティ

Flexコンテナを定義する

要素をFlexコンテナにする方法は2つあります。例を紹介します。

HTMLタグ

<div class=”p1”>コンテナ1</div> <div class=”p2”>コンテナ2</div>

CSS

.p1 { display : flex; } .p2 { display : inline-flex; }

この例では、コンテナ1とコンテナ2の両方がFlexコンテナになります。2つの違いは、ブロック要素であるかどうかです。

コンテナ1はブロック要素として扱われ、コンテナ2はインラインブロック要素として扱われます。別の言い方をすると、コンテナ1はdisplay:block;の要素、コンテナ2はdisplay:inline-block;の要素になります。

並べ方を定義する

flex-directionプロパティを使うと、Flexアイテムの並び方を指定できます。flex-directionプロパティには以下の4つの値を設定できます。

・flex-direction:row;　左から右 ・flex-direction:row-reverse;　右から左 ・flex-direction:column;　上から下 ・flex-direction:column-reverse;　下から上

4つの値それぞれの例を紹介します。

flex-direction:row;

Flexアイテムを左から右へ並べます。

HTMLタグ

<div class=”fl”>     <div>1</div>     <div>2</div>     <div>3</div> </div>

CSS

.fl {     display : flex;     flex-direction : row;  }

子要素が「123」の順に横並びで表示されます。

flex-direction:row-reverse;

Flexアイテムを右から左へ並べます。

HTMLタグ

<div class=”fl”>     <div>1</div>     <div>2</div>     <div>3</div> </div>

CSS

.fl {     display : flex;     flex-direction : row-reverse;  }

子要素が「321」の順に横並びで表示されます。

flex-direction:column;

Flexアイテムを上から下へ並べます。

HTMLタグ

<div class=”fl”>     <div>1</div>     <div>2</div>     <div>3</div> </div>

CSS

.fl {     display : flex;     flex-direction : column;  }

子要素が「123」の順で、縦に並べて表示されます。

flex-direction:column-reverse;

Flexアイテムを下から上へ並べます。

HTMLタグ

<div class=”fl”>     <div>1</div>     <div>2</div>     <div>3</div> </div>

CSS

.fl {     display : flex;     flex-direction : column-reverse;  }

子要素が「321」の順で、縦に並べて表示されます。

要素を一行に収めて表示する

flex-direction:rowやflex-direction:row-reverseを指定すると、子要素は横並びで一行に表示されます。このときの振る舞いを定義するのがflex-wrapプロパティです。

flex-wrapプロパティには以下の3つの値を設定できます。

・flex-wrap:nowrap;　一行に配置 ・flex-wrap:wrap;　複数行配置、上から下 ・flex-wrap:wrap-reverse;　複数行配置、下から上

flex-wrap:nowrap;

Flexアイテムを一行に配置します。横幅に合わせてアイテムが縮小されます。

HTMLタグ

<div class=”fl”>     <div>1</div>     <div>2</div>     <div>3</div> </div>

CSS

.fl {     width : 400px;     display : flex;     flex-wrap :nowrap;  }

子要素が「123」の順に横並びで表示されます。親要素の幅である400ピクセルに収まるように子要素は縮小されます。

flex-wrap:wrap;

Flexアイテムを複数行に配置します。アイテムは縮小されません。左から右へ表示していき、横幅が足りない場合は次の行に続けて表示します。

HTMLタグ

<div class=”fl”>     <div>1</div>     <div>2</div>     <div>3</div>     <div>4</div>     <div>5</div>     <div>6</div> </div>

CSS

.fl {     width : 400px;     display : flex;     flex-wrap :wrap;  } .fl div {     width : 100px; }

子要素が1から順に横並びで表示されます。親要素の幅である400ピクセルに収まらないときは改行されます。この例では子要素の幅が100ピクセルなので1から4までが1行目に表示され、5と6が次の行に表示されます。

flex-wrap:wrap-reverse;

Flexアイテムを複数行に配置します。アイテムは縮小されません。アイテムを左下詰めで表示していき、横幅が足りない場合は上の行に表示します。

HTMLタグ

<div class=”fl”>     <div>1</div>     <div>2</div>     <div>3</div>     <div>4</div>     <div>5</div>     <div>6</div> </div>

CSS

.fl {     width : 400px;     display : flex;     flex-wrap :wrap-reverse;  } .fl div {     width : 100px; }

親要素のボックス内で、左下詰めで子要素が表示されます。この例では子要素の幅が100ピクセル、親要素の幅400ピクセルなので1から4までが一行に表示されます。5と6は、1から4の上の行に「56」と続けて表示されます。

その他のFlexコンテナ用プロパティ

flex-flow

flex-directionとflex-wrapの両方をまとめて指定するプロパティです。以下のように記述します。

flex-flow : column wrap-reverse;

justify-content

水平方向の表示と等間隔表示を指定します。以下の7つの値を指定可能です。

・stretch　コンテナサイズに合わせて均等表示 ・flex-start　先頭寄せで表示 ・flex-end　末尾寄せで表示 ・center　中央寄せで表示 ・space-between　両端余白なしで均等表示 ・space-around　要素幅の半分の余白で均等表示 ・space-evenly　要素と同サイズの余白で均等表示

align-items

垂直方向の表示を指定します。以下の5つの値を指定可能です。

・stretch　親要素の高さに合わせて表示 ・flex-start　先頭寄せで表示 ・flex-end　末尾寄せで表示 ・center　中央寄せで表示 ・baseline　ベースラインに沿って表示

align-content

垂直方向の表示と等間隔表示を指定します。以下の7つの値を指定可能です。

・stretch　コンテナに合わせて均等表示 ・flex-start　先頭寄せで表示 ・flex-end　末尾寄せで表示 ・center　中央寄せで表示 ・space-between　両端余白なしで均等表示 ・space-around　要素幅の半分の余白で均等表示 ・space-evenly　要素と同サイズの余白で均等表示

Flexアイテム用のプロパティ

order

orderはFlexアイテムの順番を指定するプロパティです。値には0、正の数、負の数を指定します。値の昇順でアイテムが表示されます。

HTMLタグ

<div class=”fl”>     <div class=”item1”>1</div>     <div class=”item2”>2</div>     <div class=”item3”>3</div> </div>

CSS

.fl { display : flex; } .item1 { order : 2; } .item2 { order : -5; } .item3{ order : 77; }

この例ではアイテムが「213」の順で表示されます。

flex-grow

flex-growはアイテムの拡大を指定するプロパティです。値には0、正の数、負の数を指定します。Flexアイテムを親要素に合わせてストレッチさせるとき、flex-grow値の大きいアイテムが優先的に拡大されます。

HTMLタグ

<div class=”fl”>     <div class=”item1”>1</div>     <div class=”item2”>2</div>     <div class=”item3”>3</div> </div>

CSS

.fl { display : flex; } .item1 { flex-grow : 0; } .item2 { flex-grow : 1; } .item3 { flex-grow : 0; }

flex-shrink

flex-shrinkはアイテムの縮小を指定するプロパティです。値には0か正の数を指定します。Flexアイテムを親要素に合わせてストレッチさせるとき、flex-shrink値の大きいアイテムが優先的に縮小されます。

0を指定した場合は例外的にオリジナルサイズを維持して表示します。

flex-basis

flex-basisはアイテムの初期サイズを決めるプロパティです。ピクセルやemなどの単位でwidthの値を指定します。

flex-basisはFlexアイテム用のwidth指定プロパティとして使います。widthプロパティでの指定とは違い、アイテムがコンテナに収まりきらないときはwidthの値を無視して自動縮小されます。

align-self

align-selfは、Flexコンテナに指定したalign-itemsの値を上書きするプロパティです。Flexアイテムに対して個別にflex-startやflex-endの表示方法を指定できます。

CSSのFlexboxまとめ

親要素にdisplay:flexを指定すると、その要素がFlexコンテナ、子要素がFlexアイテムになります。

Flexboxはプロパティ数が多くて仕組みも複雑ですが、マスターすると横並びのデザインが簡単に作ることが可能です。とくにjustify-contentプロパティを使えば、自動的に余白を作って等間隔にアイテムを並べられます。Web制作を効率化するためにぜひFlexboxを習得してみてください。