CSS Flexbox 基礎

普段はbootstrapを使用していますが、画面のレイアウトを意外にも簡単に設定してくれるFlexboxのメモです。どちらがいいのかを比べているブログもありましたので最後に紹介しています。

CSS Flexboxとは

ページレイアウトを様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合に、ページ上の要素が指定した通りに配置されるレイアウトモードです。（引用　MDN）

使い方の詳細はMDNやドットインストールでも学ぶことができます。下記に主要な用語などのメモをまとめます。

flex container	レイアウトしていきたい要素（flex item）を含めるための領域
flex item	レイアウトしていきたい要素
flex-direction	主軸を定義するプロパティ（デフォルト値：row）
main axis	flex-directionで定義した方向にそって作られる軸（rowなら横向き） flex itemはこのmain axisに沿って並べられていく
cross axis	main axisに直行する軸
flex containerにつけられるレイアウト	flex-direction、flex-wrap、justify-content、align-items、align-content
flex itemにつけられるレイアウト	order、flex-grow、flex-shrink、flex-basis、align-self、 flex-flow: wrap;　flex-direction: row;　flex-direction: column;　flex-direction: column-reverse;
flex itemの注意点	flex itemになるのはflex containerの直近の子要素だけでそれ以下の階層があって、その下に子要素や孫要素がある場合そちらはflex itemにならない

その他主な使い方

display: flex; display: inline-flex;	要素がflexboxを使用するように指定
flex-wrap: wrap;	規定幅で折り返ししてくれる
flex-wrap: wrap-reverse;	逆方向から始まり規定幅で折り返してくれる
flex-flow: wrap column;	flex-directionとflex-wrapを一気に指定してくれる
justify-content: flex-start;   justify-content: flex-end;   justify-content: center;	余白ができたときに要素の整列順を指定する
justify-content: 　　 　　space-between;	要素の間で余白を均等に分割して配置してくれるもの
justify-content: space-around;	要素数で均等に分割してあげて、その領域の中で両端に余白が均等に来るようにする
align-items: flex-start; align-items: flex-end; align-items: center; align-items: stretch; align-content: flex-start; align-content: space-between; align-content: space-around;	cross axis方向で整列を指定

Railstutorialから入ったので今までBootstrap を使用してきましたが、微調整をつけるならFlexboxの方がおすすめなのかもしれません。比べていただいているブログがありましたので参照！

nw.myds.me