flex-directionプロパティ

ほんっとにはじめてのHTML5とCSS3
【18-2】Flexbox内のボックスの配置方法を指定しよう サンプル3

1

メディアクエリで、ビューポートが幅400px以下の時 flex-direction: column にしています。
各Flexboxアイテムはブロックレベルになって縦に並びます。

2

3

4

5

各Flexboxアイテムの高さを統一するには、min-height を指定します。

6

CSS

div#container {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between}
div#container section {flex:1 0 100px}

@media only screen and (max-width: 400px){
	div#container {flex-direction:column} /*親のFlexboxコンテナに*/
	div#container section {min-height:200px} /*子のFlexboxアイテムに*/
}