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

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー