【CSS】要素を簡単に並び替えるFlexbox

以前まではdiv要素を横並びにする際には、floatなどを使っていましたが、Flexboxを使えばもっと簡単にその処理を行うことができます。

並び替えをしたい要素の親要素にdisplay:flex;を記述します。

.box{
  display: flex;
}

子要素側にflex:auto;と記述すれば、親要素いっぱいに子要素を均等に広げることができます。

<div class="box">
  <div class="boxcontents"><div>
  <div class="boxcontents"><div>
  <div class="boxcontents"><div>
</div>

.box{
  display: flex;
  width:100%;
}

.boxcontents{
  flex:auto;
  border:solid red;
}

親要素にflex-wrap:wrap;を指定すれば、子要素を折り返すことができます。例えば３つの要素（各width:50%)があった場合には、３つ目の要素が2段目となります。

flex-wrapには値として、nowrap、wrap-reverseもあります。

.box{
  display: flex;
  flex-wrap:wrap;
}

.boxcontents{
  border:solid red;
  width:50%;
}

親要素にflex-direction: columnを指定すれば、子要素を縦に並べることができますう。

.box{
  flex-direction: column;
}

.boxcontents{
  border:solid red;
  width:50%;
}