Flexbox便利だよね

今までdiv.floatBoxとかクラスをつけて作ってた横並びのリストとかが簡単にできるようになったよね。

HTML:
<div class="flexContainer">
  <div class="item">
    <h1>title</h1>
    <p>content</p>
  </div>
  <div class="item">
    <h1>title</h1>
    <p>content</p>
  </div>
  <div class="item">
    <h1>title</h1>
    <p>content</p>
  </div>
</div>

CSS:
.flexContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
  .flexContainer .item {
    ...
  }

時と場合によってはdivではなくてsection, articleも使い分けると良さそう
CSSはほとんどflexのrootだけ設定すればうまくいくことが多いけど、やはりマルチウィンドウサイズに対応って考えると.containerを960pxに固定してしまったりしてしまうほうが作りやすいね。
メディアクエリを使ってマルチウィンドウサイズに対応させるのがいいっぽい。

っていうか、そろそろSCSSとかなんかもうちょっとリッチにかけるやつ使いたい…