Flexboxを使った画面コントロール

Flexbox(Flexible Box Layout Module)はフレキシブルなレイアウトが組めるCSS3のレイアウトモジュールです。

従来のCSSはブロック要素が縦に書かれましたが、Flexboxの基本は横書きです。但し指定方法によっては縦書きも可能で、この辺がフレキシブルなレイアウトツールの意味する所です。

それではFlexboxの基本から順次解説していきます。

1.flexboxの基本

Flexboxは対象がエリアで、親要素と子要素から構成されます。

下記HTMLは親要素がflex-boxで子要素がflex-itemになります。(divでなくULを親、liを子でもOK)

<div class="flex-box">
<div class="flex-item">
		<p>子要素①</p>
	</div>
<div class="flex-item">
		<p>子要素②</p><p>二行目</p>
	</div>
	<div class="flex-item">
		<p>子要素③</p>
	</div>
</div>

CSSは下記になります。

.flex-box{display:flex;border:1px solid #000;padding:5px;}
.flex-item{margin-left:5px;padding:5px;background-color:#d9edf7;margin-bottom:5px;}

※1.親要素(.flex-box)にdisplay:flex;を指定する事により、このエリアがFlexbox対象になります。

上記の表示結果は下図になります。

これはFlexboxのプロパティで下記のデフォルト値が設定されている為上記の様な表示になります。

区分	プロパティ	デフォルト値	挙動
親要素	flex-wrap	nowrap	nowrapは子要素を1行で表示します
	align-items	stretch	stretchは子要素の高さを一番高い物に合わせます
	justify-content	flex-start	flex-startは子要素の基準は左です
	flex-direction	row	rowは子要素を左から右に書きます
子要素	flex-basis	auto	autoは子要素の幅をコンテンツサイズにします
	flex-grow	0	0は子要素は伸長させない設定です
	flex-shrink	1	１は子要素は縮小させる設定です

※1.区分の親要素は、flex-boxに指定するプロパティです。

※2.区分の子要素は、flex-itemに指定するプロパティです。

尚、上記のプロパティのデフォルト値を他の値に変更する事により表示形式を変更する事ができます。

以下に説明します。

2.１行表示の場合

2-1.親要素にalign-itemsを指定する

align-itemsは垂直方向の揃え方です。

書式はalign-items:××;になります。

	stretch	flex-start	flex-end	center
意味	ストレッチします。デフォルト align-items:stretch	上に揃えます align-items:flex-start	下に揃えます align-items:flex-end	中央に揃えます align-items:center
表示

※1.上記以外にbaselineという指定方法がありますが上記htmlではflex-stratと表示は同じになります。

2-2.親要素にjustify-contentを指定する。

justify-contentは水平方向の揃え方です。

書式はjustify-content:××;になります。

設定値	意味	表示
flex-start	左基準　デフォルト justify-content:flex-start
flex-end	右基準 justify-content:flex-end
center	中央基準 justify-content:center
space-between	始めと最後を端にして他は均等 justify-content:space-between
space-around	総てを余白を均等 justify-content:space-around

　メモ

ヘッダでは、ロゴは左に寄せ、その他は右に寄せたい等のニーズがある。

この様な場合はデフォルトの「justify-content:flex-start」で2番目の要素を下記の様に指定すると可能になる。

・要素名が明確な場合：2番目の要素{margin-left：auto；}

・li要素のLISTの場合：li:nth-child(2){margin-left：auto；}

そうすると2番目以降の要素も右基準となる。

2-3.親要素にflex-directionを指定する。

flex-directionは子要素を書く方向を指定します。

書式はflex-direction:××;になります。

設定値	意味	表示
row	左から右　デフォルト flex-direction:row
row-reverse	右から左 flex-direction:row-reverse
column	上から下 flex-direction:column
column-reverse	下から上 flex-direction:column-reverse

2-4.子要素にflex-growを指定する。

flex-growは子要素を伸長させる方法を指定します。

書式はflex-grow:××;になります。

設定値	意味	表示
0	伸長しない　デフォルト flex-grow:0
1	伸長させる flex-grow:1

3.複数行表示の場合

複数行表示にする為には下記を指定する必要があります。

flex-basis:××%；

flex-wrap:wrap;

上記を親要素に設定すると子要素が横画面一杯なると次の行に書かれます。

　メモ

横に5個並べる場合は下記になります。

.flex-item{margin:0 0.5%;flex-basis:19%}

計算式は、左右マージン1%×5個＋19%×5個=100%

3-1.align-contentを設定する

align-contentは複数行にした時の縦方向に余白がある場合の揃えになります。

設定値	意味	表示
stretch	デフォルト枠一杯にストレッチする
flex-start	上に寄せる
flex-end	下に寄せる
center	中央に寄せる
space-between	1行目と最後の行を上下に合わせて他は均等配置
space-around	総てを均等に配置する

4.その他

PCは横に5個並べるが、タブレットは4個、スマホは2個にしたい等のニーズがあります。

その場合はメディアクリエータを使って処理します。

.flex-item{    /* PCの場合 */
flex-basis:19%;
 	margin:5px 0.5%;}
@media screen and (min-width:768px) and (max-width:991px){  /* タブレットの場合 */
	.flex-item{flex-basis:24%;}
}
@media screen and (max-width:767px){  /* スマホの場合 */
	.flex-item{flex-basis:49%;}
}

※1.flex-basisの代わりにwidthを使っても動作は同じです。

以上のFlexboxの機能を使うと、綺麗に画面が設計できます。