css flex cheat sheet

.container{

    display: -webkit-flex/inline-flex;

    display: -moz-flex/inline-flex;

    display: -ms-flex/inline-flex;

    display: flex/inline-flex;

}

要素をflex形式でレンダリングする
flex=block
inline-flex=inline-block
 

flex-direction: row/row-reverse/column/column-reverse;

主軸方向の定義
row=左から右(デフォルト)
column=上から下へ
 

flex-wrap: nowrap/wrap/wrap-inverse

サイド軸方向の定義
nowrap=改行しない(デフォルト)
wrap=改行、改行方向と文字配列方向が一致
wrap-inverse=文字配列方向とは逆
 

flex-flow: row wrap;

主軸とサイド軸の両方を定義
 

justify-content: flex-start/flex-end/center/space-between/space-around;

一方通行、主軸方向の位置合わせ
space-between=要素の間に空白を埋める
space-around=space-betweenに基づいて、先頭要素と末尾要素に空白を残す
 

align-items: flex-start/flex-end/center/baseling/stretch;

1行の要素間の横軸方向の位置合わせ
stretchでは、押し出し要素が行全体を埋め尽くします
 

align-content: flex-start/flex-end/center/space-between/space-around/stretch;

複数行の内容の間、行と行の横軸の位置合わせ
 
 
単一要素を下針で設定

align-self

親コンテナのalign-itemsの設定値を上書きし、単一要素に対して設定します.
 

order: <integer>

要素の並び順を設定
 

flex:  none | initial | auto | [flex-grow flex-shrink || flex-basis] | initial | auto;

Initial=余剰スペースがある場合は何の変化もありませんが、必要に応じて収縮します
Auto=主軸に基づいて自動的に伸縮し、すべての空き領域を占有します.通常のストリームの自動外距離と非常に似ています.
flex-grow=拡張率.コンテナスペースが要素に必要なコントロールの和より大きい場合は、要素の設定値に基づいて要素サイズを拡大して残りのスペースを埋めます.0はスペース割り当てに参加しません.
flex-shrink=収縮比.コンテナ空間が要素に必要な空間の和より小さい場合.エレメントの設定値に応じてエレメントをコンテナサイズに合わせて縮小します.0はスペース割り当てに参加しません.
flex-basis=伸縮基準値.各要素はこの値で自分のサイズを主張し、コンテナが要素の主張サイズを満たすと、残りのスペースがある場合はflex-growに従って残りのサイズを割り当てます.スペースが不足してすべての要素を置くと、差分部分はflex-shrinkに従って各要素を縮小します.*ここで主張するサイズは、要素の幅と高さを指し、要素のbox-sizingがデフォルト値(content-box)である場合、残りの空間を計算するか、縮小する必要がある前にpaddingとborder-widthを減算します.