要素の配置

通常は、インライン要素は横に詰めて並び、ブロック要素は下に配置されます。
意図したレイアウトで左右に配置する場合には、以前はfloatなどを使っていました。
ですが、このdesplay:flex;の登場で、簡単に柔軟な要素の並びが実現できるようになります。

desplay:flexってどんなの？

実際のコードを見てもらった方が早いので、実例をもとに紹介していきます。
これらを使いこなすことができれば、様々な配置がシンプルで簡単に対応できるようになりますよ。

まずは、シンプルな動作を確認するために、単純にdesplay:flex;を適用しましょう。
このように、親要素に対して複数の子要素を並べてみます。

<ul>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
</ul>

次に、子要素をまとめている親要素ulにdesplay:flex;を指定します。

ul{
  display: -webkit-flex;
  display: flex;
}

これが、desplay:flex;の一番シンプルな形です。

ちなみに、flexと-webkit-flexのように、今後-webkit-が対になって出てきますが、これはベンダープレフィックスと言って、標準でない各社で先行的に実装された属性値についているものです。
標準仕様になるまでは、ブラウザごとにベンダープレフィックスが付いた値が必要になります。
記述が増えるので複雑に感じられることもありますが、複数ブラウザに対して記述が増えているだけなので書いているのは１行だけと脳内変換するとシンプルに感じれますｗ。

上のコードを表示するとこんな感じです。
これをベースに、ここから様々な配置を紹介していきたいと思います。

See the Pen
display:flex;　プレーン by Yoshimune (@hachidaime)
on CodePen.

横位置の指定　justify-content

まずは横位置の配置から、左右中央のどこに配置するかというシンプルな指定ですね。
何も指定しないときには左寄せ（flex-start）になります。
中央の場合はcenter、右の場合はflex-endを使用します。

flexの属性値はstartやendという単語が使われます。
起点の考え方で、標準では左から右へ配置されるイメージで、起点のstartが左側になります。
後で出てきますが、縦になる場合は起点の上がstartとなります。
また、配置を逆順にすると起点自体が移動するので、startが右で、endが左になったりします。
具体的なことは後ほど出てきますので、ここではさらっと知っておきましょう。

<ul>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
</ul>

<ul class="center">
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
</ul>

<ul class="right">
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
</ul>

/* flex指定 */
ul {
  display: -webkit-flex;
  display: flex;
  /*
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  */
}
ul.center {
  -webkit-justify-content: center;
  justify-content: center;
}
ul.right {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

See the Pen
display:flex;　横配置 by Yoshimune (@hachidaime)
on CodePen.

縦位置の指定　align-items

次に、縦の位置を指定する方法を見てみましょう。
縦位置に関しては、そもそも親要素自体に高さがないといけないので、まずは親要素に高さを指定しておくのを忘れないように。
その上で、標準では上部に配置され、続いてcenterで中央へ、endで下部へ配置されます。

<ul>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
</ul>

<ul class="v_center">
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
</ul>

<ul class="v_bottom">
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
  <li>アイテム</li>
</ul>

/* flex指定 */
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  height: 100px;
}
ul.v_center {
  -webkit-align-items: center;
  align-items: center;
}
ul.v_bottom {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

See the Pen
display:flex;　縦配置 by Yoshimune (@hachidaime)
on CodePen.

並べ順の指定　flex-direction

次に並べ順です。
flexの使い勝手のいい１つとしてこの並び順が簡単に変更ができるところですね。
左から並べたり右から並べたり、レスポンシブデザインでは非常に重宝するスタイルとなります。
何も指定しないときの標準の左からの並びに対して、reverseで逆順にすることができます。

<ul>
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
  <li>アイテム４</li>
  <li>アイテム５</li>
</ul>

<ul class="reverse">
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
  <li>アイテム４</li>
  <li>アイテム５</li>
</ul>

/* flex指定 */
ul {
  display: -webkit-flex;
  display: flex;
}
ul.reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

See the Pen
display:flex;　並べ順 by Yoshimune (@hachidaime)
on CodePen.

逆順については少し注意しないといけないんですが。
逆順にするというのは、右が先頭になるイメージを持ってもらうといいと思います。
逆順にした際にはstartの位置が右側になるため、表示上左に配置したい場合はend側に寄せることになります。

ul.reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

このようにすると、逆順で左寄せとなります。

並べ方向の指定　flex-direction

flexでは、並びの方向も変更することができます。
標準は横向きに並べますが、縦に並べることもできます。
また、縦方向でかつ逆順という指定も用意されているのでそれぞれ見てみましょう。

<ul>
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
  <li>アイテム４</li>
  <li>アイテム５</li>
</ul>

<ul class="column">
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
  <li>アイテム４</li>
  <li>アイテム５</li>
</ul>

<ul class="column reverse">
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
  <li>アイテム４</li>
  <li>アイテム５</li>
</ul>

/* flex指定 */
ul {
  display: -webkit-flex;
  display: flex;
}
ul.column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
ul.column.reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

See the Pen
display:flex;　並べ方向 by Yoshimune (@hachidaime)
on CodePen.

均等配置　justify-content

次に全体に対しての要素の配置の仕方です。
何もしなければ要素が詰めて配置されましたが、これを全体に均等に配置することができます。
均等配置には2つのパターンがあって、親要素全体に対して左右を基準に均等に配置される方法と、要素の左右に均等にマージンが設定されるような配置があります。
中央寄せのデザインではよく使うパターンです。

<ul>
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
  <li>アイテム４</li>
  <li>アイテム５</li>
</ul>

<ul class="around">
  <li>アイテム１</li>
  <li>アイテム２</li>
  <li>アイテム３</li>
  <li>アイテム４</li>
  <li>アイテム５</li>
</ul>

/* flex指定 */
ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
ul.around {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

See the Pen
display:flex;　配置 by Yoshimune (@hachidaime)
on CodePen.

さて、いかがでしたでしょうか。
このflexを使えば配置が簡単にできますね。
複雑に見える配置も、ベースとなる枠組みを作るだけでとても楽になります。
全てをposition:absoluteで配置する人もよく見かけますが、
システマチックな配置にずれをposition:absoluteで調整するといいです。

ぜひ使ってみてください。