CSS3から新しく追加されたflexboxを初めて使ってみたので、自分の備忘録としてまとめてみる。
そもそもflexboxとは
要素を中央寄せしたり、横並びにしたり、横並びの要素の高さを揃えたりできるもの。
要は、flexboxを使えば、これまでfloatやJavaScriptを使っていたものをより簡単に実装できる！
書き方
使い方はとてもシンプル。まずはHTMLから。
index.html
<body>
<div class="container">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
<div class="item3">Item3</div>
<div class="item4">Item4</div>
</div>
</body>
このHTMLに対してflexboxを適用させたい場合は、
app.css
.container {
display: flex;
}
これだけ。
これだけで横並びになる。
あとは、親要素に指定できるプロパティと子要素に指定できるプロパティがそれぞれあるので、
適用させたいスタイルに応じて利用する。
例えば・・・
・子要素（上で言えばitem1~item4）の並ぶ向きを揃えたい。
→flex-directionを使う。
app.css
.container {
display: flex;
flex-direction: row;
}
これは子要素を左から右に並べる方法。
逆にこ要素を右から左に並べたい場合は、
app.css
.container{
display: flex;
flex-direction: row-reverse;
にする。
などなど適用させたいスタイルによって様々なプロパティがある。
より多くのパターンを自分のものにしたい。