基本的な使い方
親要素(例えばdiv)に display: flex
をつけるだけ。
ベンダープレフィックスってつける必要あるの?
一部のバージョンが古いブラウザでは対応していなかったりベンダープレフィックスが必要になりますが、それらのシェアも実際はほとんど0に近いので、気にしなくていいでしょう。
【2020年最新】Flexboxの対応ブラウザとベンダープレフィックスまとめ
最新のIE 11でもいくつかバグが報告されている
ともありますが、IEを想定しないなら、結局のところベンダープレフィックスは付けなくても大丈夫そう。
プロパティって色々あるけどどれ使えばいいの?
・大抵、「ブロック要素を手軽に横並びにしたい」という時に使うと思うので、その場合は、 justify-content
(アイテムの水平方向の位置を指定する)と align-items
(アイテムの垂直方向の位置を指定する)くらいかな。
・縦並びにしたかったら、flex-direction: column
で、並び順を逆にしたければ flex-direction: row-reverse
とか(でも使う頻度は多くない?)
・折り返しを制御するflex-wrap
(デフォルトはnowrap
で折り返さない)もあるけど、BootStrapのGrid System(col-とか)使えば、必要ない?
・align-content
(アイテムの行の垂直方向の位置を指定する)は、行が複数になった時に使う、justify-content
の縦版って感じかな(余白を埋めるか、どう割り振るか)。