
前回は「入門9:【CSS/display】の使い方・注意点をすぐに理解したい人へ」でdisplayの使い方を見てきました。今回はCSSのFlexboxについて学んでいきましょう。お二人はFlexboxを知っていますか?



Flexboxは一度も使ったことがないなぁ……



Flexboxは聞いたことがありますよ。楽にレイアウトするための割と新しいCSSですよね



そのとおりです。Flexboxを使えば少ないコードでデザインを表現できるようになりますよ
CSSのFlexboxは要素を簡単に配置するためのプロパティです。複雑なコードを書かなくても要素を横並びに表示したり、並び順を指定して表示することができます。
Flexboxを使うとHTMLやCSSのコーディングの負担が軽減されるだけでなく、要素を隙間なく並べたデザインを簡単に再現できます。このページではサンプルを交えながらFlexboxの基礎知識について解説します。
Flexboxの基本






まずは、Flexboxがどんなものなのか解説しますね
Flexboxとは
CSSのFlexboxはプロパティではなく仕組みの名前です。実は、CSSにはFlexboxというプロパティはありません。



Flexboxはプロパティじゃないんだね



そうなんです。Flexboxはプロパティの名前ではなく、子要素を簡単に配置するための仕組みです
Flexboxを使う方法
Flexboxレイアウトを使いたいときは、以下のようにdisplayプロパティにflexの値を設定します。
div { display : flex; }
親要素に対してdisplay:flex;を指定すると、その要素の中でFlexboxレイアウトが使えるようになります。
Flexboxのコンテナとアイテム
要素にdisplay:flex;を指定すると、その要素は自動的にFlexコンテナとして扱われます。Flexコンテナに内包される子要素はFlexアイテムと呼ばれ、難しい指定なしでも横並びでの表示や等間隔での表示が可能になります。



子要素をFlexアイテムにするコマンドはありますか?



Flexアイテムにするコマンドは必要ないんです。Flexコンテナの中にある子要素は、自動的にFlexアイテムとして扱われますよ
Flexboxでできること
Flexboxを使うと以下のようなレイアウトを簡単に実現できます。
- 子要素を横並び/縦並びにする
- 隣接する子要素の余白を自動で調整する
- 子要素の表示順をCSSで入れ替える
この中で一般的なCSSと大きく異るのが、子要素の表示順を入れ替える機能です。通常、要素はHTMLで書いた順番に表示されます。ブロック要素は上から下へ表示され、インライン要素は左から右へ表示されます。
しかし、FlexBoxを使うと、上から下、左から右という法則を逆にすることができます。
Flexboxの分類
Flexboxは、親要素(Flexコンテナ)と子要素(Flexアイテム)を分けて考えると理解しやすいです。display:flex;を指定した要素はFlexコンテナとなり、内包される要素はFlexアイテムとなります。



コンテナの中にある要素は、勝手にFlexアイテムになるんだったね



Flexboxに関するプロパティは、Flexコンテナ用のプロパティとFlexアイテム用のプロパティの2つに分けられます。ここからは、それぞれのプロパティの種類について紹介していきますよ
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;の要素になります。



inline-flexを設定したとき、Flexアイテムがインライン要素になったりしますか?



flexとinline-flexのどちらを使ってもFlexアイテムには影響しません。2つの違いはFlexコンテナがブロック要素になるかインラインブロック要素になるかですね
並べ方を定義する
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」の順で、縦に並べて表示されます。



これで並び方の指定についてはわかりましたか?



はーい! reverseがつくと並びが逆向きになるって覚えたよ
要素を一行に収めて表示する
flex-direction:rowやflex-direction:row-reverseを指定すると、子要素は横並びで一行に表示されます。このときの振る舞いを定義するのがflex-wrapプロパティです。
flex-wrapプロパティには以下の3つの値を設定できます。
・flex-wrap:nowrap; 一行に配置 ・flex-wrap:wrap; 複数行配置、上から下 ・flex-wrap:wrap-reverse; 複数行配置、下から上



複数行配置がイマイチわかりません



たしかに箇条書きだけではわかりにくいかもしれません。3つの値を使った例を見てみましょう
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コンテナのプロパティは他にもあるの?



その他にも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アイテム用のプロパティ






ここからは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まとめ






はい。というわけで、以上がCSSのFlexboxの基礎知識でした。二人ともどうでしたか?



これからはFlexを使って簡単に横並びのコンテンツ配置ができそうです



バッチリわかったよ!



では、最後にFlexboxの情報を簡単にまとめておきましょう
親要素にdisplay:flexを指定すると、その要素がFlexコンテナ、子要素がFlexアイテムになります。
Flexboxはプロパティ数が多くて仕組みも複雑ですが、マスターすると横並びのデザインが簡単に作ることが可能です。とくにjustify-contentプロパティを使えば、自動的に余白を作って等間隔にアイテムを並べられます。Web制作を効率化するためにぜひFlexboxを習得してみてください。
コメント