フレキシブルボックス

※フレキシブルレイアウトの良い点：
　ボックスが2段の場合、高さが高いほうに揃うように延びてくれます。
※幅に入りきらなくなったら、初期値では横幅が狭くなります。これがfloatと違います。
　折れ曲がって下に行くには別にプロパティを書きます。

フレキシブルボックスは2段階で変化してきました。まだまだ変更がある可能性があります。

■mainの中にleft-contentとright-contentが入っている構造で横並びする方法
　横並びする要素には『親』が必要です。　親にdisplay:flex;をかけます。
　これをフレキシブルボックスレイアウトと呼びます。
　しかしIE10では対応していません。（開発者ツールで見るとうまくいっているように見えますが・・・）
　親の事をフレックスコンテナー、子をフレックスアイテムといいます。
　アイテムの名称もついています。
　　主軸　メインアクシズ（左から右にならぶの）。
　　クロスアクシズ（上から下に並んでいるもの）

#main{
  display:-ms-flexbox;/*IE10用*/
  display:-moz-box;
  /*モジラーは横並びにはなりますが、他のものに影響を与えてうまくいかないので
    使わないという手もあります。
    なるべく最新のものをつかってほしいですが、エンタープライズ企業向け版などは対応が
    必要な場合があります。*/
  display:-webkit-flex;/*IOS系はつけないとベンダー接頭辞をつけないと動かない。*/
  display:flex;	/*IE11とMSエッジ、最新クロム*/
}