CSS3から追加されたjustify-contentって何？というお話し
PR
justify-contentは使ったことが無いのですが、とあるコードに使われていたのでどういったものか分からなかったので調べてみました
flexboxコンテナという概念あり、flexboxコンテナはjavascriptとか使わないとやりづらかったレイアウトをCSSでできやすくするものです。
そのflexboxと一緒に使われるのがjustify-contentというプロパティ、これは水平方向へのコンテナの子要素の動きをそれぞれ指定するものです。
justify-contentには
- flex-start
- flex-end
- center
- space-between
- space-around
の5の値がある
flex-startは左端から並べ始める
flex-endは右端から並べ始める
それぞれfloatに近い感覚
flex-centerは中央に集める
space-betweenは両端にはスペースは無く、子要素の間には等間隔のスペースが存在する状態
space-aroundはすべての子要素の同じ間隔のスペースを作るもの、なので両端のスペースは子要素間のスペースより小さくなる、margin: 0 10px;で並べた感じと似ています
flexboxは結構仕様がコロコロ変わっているようなので、古い情報等も存在するのでググっているとどれが正しい情報か混乱してしまうところもありますが、対応ブラウザもまちまちなので 実用にはもう少し時間が必要かなと感じます IEは10以降でないと動かないっていうのも結構大きいです
参考になったページ
http://tech.naver.jp/blog/?p=2479
http://liginc.co.jp/web/html-css/css/21024
http://htmlcss.jp/css/justify-content.html
PR
短縮URL:
COMMENT