Flexboxの設定方法

“Flexbox”とは、Flexible Box Layout Moduleのことで、その名の通りスマートフォンからPCまで、簡単にレイアウトが組める便利なボックスの表示方法です。

各要素内の文字数や画像のサイズ（高さ）に関係なく、横並びの要素は自動的に同じ高さに調整されるので、見栄えの良いレイアウトになります。

下記サンプルを、ブラウザの幅を狭めたり、タブレットやスマホで見ていただければ、その動きがわかると思います。
（下記 SAMPLE の場合、PCだと3カラム、タブレット（縦）だと2カラム、スマホだと1カラムにレイアウトが変化します。なお、分かりやすくするため、 SAMPLE には背景色を設定してあります。）

SAMPLE

<!--flex_box-->
<div class="flex_box">
<div class="flex_item threetwoone">
ああああああああああーここに表示させたい内容を入れますーああああああああああ
</div>
<div class="flex_item threetwoone">
いいいいいいいいいいーここに表示させたい内容を入れますーいいいいいいいいいい
</div>
<div class="flex_item threetwoone">
ううううううううううーここに表示させたい内容を入れますーうううううううううう
</div>
<div class="flex_item threetwoone">
ええええええええええーここに表示させたい内容を入れますーええええええええええ
</div>
<div class="flex_item threetwoone">
おおおおおおおおおおーここに表示させたい内容を入れますーおおおおおおおおおお
</div>
</div>
<!--flex_box-->

/*Flexboxの設定*/
.flex_box {
  margin: 0 0 20px 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flex_item {
  margin-top: 0 !important;/*これがないと最初の要素がズレる*/
  margin: 0;
  padding: 0;
  width:100%;
  /*background-color: #eee;
  border: 1px #ccc solid;*/
}

/************************************************************/
/*【スマートフォン横】*/
/************************************************************/
@media screen and (min-width: 481px) and (max-width: 768px) {
	/*Flexboxの設定*/
	.twoone { width:50%; }/*2→1カラム*/
	.threetwoone { width:50%; }/*3→2→1カラム*/
	.fourthreeone { width:33.33%; }/*4→3→1カラム*/
	.fourtwoone { width:50%; }/*4→2→1カラム*/
} 
/************************************************************/
/*【タブレット縦以上〜PC】*/
/************************************************************/
@media screen and (min-width: 769px) {
	/*Flexboxの設定*/
	.twoone { width:50%; }/*2→1カラム*/
	.threetwoone { width:33.33%; }/*3→2→1カラム*/
	.fourthreeone { width:25%; }/*4→3→1カラム*/
	.fourtwoone { width:25%; }/*4→2→1カラム*/
}