【社内用】サンプルコード：Flexbox HTMLテンプレート

HTML

<div class="flex-container flex-container-X">
	<div class="flex-item">1</div>
	<div class="flex-item">1</div>
	<div class="flex-item">1</div>
	<div class="flex-item">1</div>
	<div class="flex-item">1</div>
	<div class="flex-item">1</div>
</div>

「flex-container-X」の『X』には何個で折り返すかの数値を入力する。

横3列にしたい場合：flex-container-3　となる。

CSS基本設定

.flex-container {
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	align-items:stretch;
	align-content:stretch;
	justify-content:space-between;
}
.flex-container .flex-item {
	flex:0 1 auto;
	/* flex-grow:0;
	flex-shrink:1;
	flex-basis:auto; */
}