フレキシブルボックスレイアウトを使う

久しぶりにCSSの記事を書いていきます。タイトルの通りフレキシブルボックスレイアウトについて書きます。ボックスのサイズや配置を柔軟に設定したり、調整したりできる方法をフレキシブルボックスレイアウトといいます。以前説明したpositionプロパティやfloatプロパティを使ったレイアウトの方法より簡単にレイアウトを指定できるようになります。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>フレキシブルボックス</title>
	<style>
	.displayFlex{
		/*
			displayプロパティに「flex」,「inline-flex」を指定すると、
			その要素をフレックスコンテナボックスとして、
			フレキシブルボックスレイアウトとして利用できます。
		*/
		display:-ms-flexbox;
		display:-webkit-box;
		display:flex;
	}

	/*
		フレックスアイテムを縦横どちらの方向に配置するかは、
		フレックスコンテナの主軸の方向で決まります。
		flex-directionプロパティは、この主軸の方向を指定するプロパティです。
		主軸と書いてあって難しく感じますが、簡単にいうとプロパティ値を
		rowと指定すると、左から右にフレックスアイテムを並べます。
	*/
	.flexDirRow{
		justify-content:flex-start;
		-ms-flex-direction:row;
		flex-direction:row;
	}
	.flexDirRowRev{
		justify-content:flex-start;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;
	}

	.container{
		border:1px solid black;
		width:400px;
		height:120px;
	}
	.container div{height:100%;}
	.width50{width:50px;}
	.width100{width:100px;}
	.width200{width:200px;}
	.bgPink{background-color:pink;}
	.bgYellow{background-color:yellow;}
	.bgGreen{background-color:green;}
	</style>
</head>
<body>
	<div class="container">
		<div class="flexDirRow displayFlex">
			<div class="width50 bgPink">box1</div>
			<div class="width100 bgGreen">box2</div>
			<div class="width50 bgYellow">box3</div>
		</div>
	</div>
	<div class="container">
		<div class="flexDirRowRev displayFlex">
			<div class="width50 bgPink">box1</div>
			<div class="width100 bgGreen">box2</div>
			<div class="width50 bgYellow">box3</div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>フレキシブルボックス</title>

<style>

.displayFlex{

displayプロパティに「flex」,「inline-flex」を指定すると、

その要素をフレックスコンテナボックスとして、

フレキシブルボックスレイアウトとして利用できます。

display:-ms-flexbox;

display:-webkit-box;

display:flex;

}

フレックスアイテムを縦横どちらの方向に配置するかは、

フレックスコンテナの主軸の方向で決まります。

flex-directionプロパティは、この主軸の方向を指定するプロパティです。

主軸と書いてあって難しく感じますが、簡単にいうとプロパティ値を

rowと指定すると、左から右にフレックスアイテムを並べます。

.flexDirRow{

justify-content:flex-start;

-ms-flex-direction:row;

flex-direction:row;

}

.flexDirRowRev{

justify-content:flex-start;

-ms-flex-direction:row-reverse;

flex-direction:row-reverse;

}

.container{

border:1px solid black;

width:400px;

height:120px;

}

.container div{height:100%;}

.width50{width:50px;}

.width100{width:100px;}

.width200{width:200px;}

.bgPink{background-color:pink;}

.bgYellow{background-color:yellow;}

.bgGreen{background-color:green;}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

フレックスコンテナ

フレックスアイテムを含む親要素のことで、display「flex」又は、「inline-flex」が指定された要素がフレックスコンテナになります。

displayプロパティ
値	説明
flex	この値が指定された要素を、ブロックレベルのフレックスコンテナボックスにする
inline-flex	この値が指定された要素を、インラインレベルのフレックスコンテナボックスにする

フレックスアイテム

フレックスコンテナに含まれる子要素のことで、フレックスコンテナは０個以上のフレックスアイテムを持っています。フレックスコンテナの直接の子要素になっているテキストは、匿名のフレックスアイテムに含まれています。

軸

フレックスコンテナにはレイアウトの基本となる２つの軸という物があります。主軸はフレックスアイテムの配置方向を決める軸で、高左軸は主軸に対して垂直に交わる軸です。フレックスアイテムは主軸に沿って配置されるようになっているので、どちらかが主軸又は高左軸になるかを、flex-directionプロパティを使い指定する必要があります。

flex-directionプロパティ
値	説明
row(初期値)	主軸の方向は、インライン要素が表示される方向と同じになります。日本語のように左から右に書く文字の場合なら主軸も左から右にとなり、フレックスアイテムを左から右へ並べて配置します。
row-reverse	主軸の方向は、「row」と逆向きになります。日本語のように左から右へ書く文字なら、主軸の方向は右から左となるので、フレックスアイテムを右から左へ並べて配置します。
column	主軸の方向は、ブロックレベル要素が表示される方向と同じになります。日本語のように左から右に書く文字の場合なら主軸の方向は上から下にとなり、フレックスアイテムを上から下へ並べて配置します。
column-reverse	主軸の方向は、「column」と逆向きになります。日本語のように左から右へ書く文字なら、主軸の方向は下から上となるので、フレックスアイテムを下から上へ並べて配置します。