フレックスコンテナでアイテムを複数行に配置する

フレックスコンテナ内の全てのフレックスアイテムは、１行で配置されますが、flex-wrapプロパティを利用すると、コンテナ内のアイテムを、複数行に配置できます。
フレックスアイテムが複数の行に分割されると、それぞれの行は独立して配置されます。

flex-wrapプロパティ
設定値	説明
nowrap	フレックスコンテナ内は一行になります。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向に１行で配置されます。
wrap	フレックスコンテナ内に複数行配置できるようにします。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向で配置し、交差軸の終端の方向へ折り返されていきます。
wrap-reverse	フレックスコンテナ内の複数行配置できるようにしますが、折り返しが「wrap」とは逆になります。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向で配置されながら、交差軸の始端方向へ折り返されます。

始端と終端

フレックスコンテナやフレックスアイテムには、レイアウトの方向に応じた始端と終端というものがあります。私が学習した知識で説明すると、始端は１番初めにフレックスアイテムが置かれたところで、終端は、フレックスアイテムが最後に置かれたところです。

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

<!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;
	}
	.flexWrap{flex-wrap:wrap;}

	.container{
		border:1px solid black;
		width:400px;
		height:200px;
	}
	.container div{height:100px;}
	.width50{width:50px;}
	.width100{width:100px;}
	.width150{width:150px;}
	.width200{width:200px;}
	.bgPink{background-color:pink;}
	.bgYellow{background-color:yellow;}
	.bgGreen{background-color:green;}
	.bgOrange{background-color:orange;}
	</style>
</head>
<body>
	<div class="container">
		<div class="flexDirRow displayFlex">
			<div class="width50 bgPink">box1</div>
			<div class="width150 bgGreen">box2</div>
			<div class="width50 bgYellow">box3</div>
			<div class="width100 bgOrange">box4</div>
		</div>
	</div>
	<h1>flex-wrap:wrapを指定</h1>
	<div class="container">
		<div class="flexDirRowRev displayFlex flexWrap">
			<div class="width100 bgPink">box1</div>
			<div class="width150 bgGreen">box2</div>
			<div class="width50 bgYellow">box3</div>
			<div class="width200 bgOrange">box4</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;

}

.flexWrap{flex-wrap:wrap;}

.container{

border:1px solid black;

width:400px;

height:200px;

}

.container div{height:100px;}

.width50{width:50px;}

.width100{width:100px;}

.width150{width:150px;}

.width200{width:200px;}

.bgPink{background-color:pink;}

.bgYellow{background-color:yellow;}

.bgGreen{background-color:green;}

.bgOrange{background-color:orange;}

</style>

</head>

<body>

</div>

<h1>flex-wrap:wrapを指定</h1>

</div>

</body>

</html>

レイアウトの方向と行数を一括指定

したいときは、flex-flowプロパティを使います。
「flex-flow:flex-directionの値 flex-wrapの値;」と指定します。