Flexbox

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.w3cplus.com/css3/flexbox-basics.html
flexboxの長所:
1もし元素の容器に十分な空間がないなら、各要素の幅を計算する必要がなく、彼らを同じ行に設定できます.
2彼らは早く一列に配置することができます.
3容器の左、右、中間などを配置しやすくすることができます.
4構造を修正する必要がないなら、彼らの表示順序を変えることができます.
5要素容器の設定パーセンテージとウィンドウサイズが変更された場合、コンテナの各サブ要素は、コンテナの幅または高さの割合を自動的に割り当てることができるので、要素の正確な幅を指定せずにレイアウトを破壊することができます.
なお、Flexレイアウトに設定すると、サブ要素のfloat、clear、vertical-align属性は無効となります.

footer {display: flex;flex-flow: row wrap;}	

flex-flow: flex-direction(伸縮流の方向)とflex-wrap(伸縮行改行)flex-flow属性はflex-direction属性とflex-wrap属性の簡略形式であり、標準値はrow nowrapである.
flex-direction:row、row-reverse、column、column-reverserow(標準値):主軸は水平方向で、始点は左端である.row-reverse:主軸は水平方向で、始点は右端にある.column:主軸は垂直方向で、始点は上方向である.column-reverse:主軸は垂直方向で、始点は下方向である.
flex-wrap:nowrap、wrap-reverse   nowrap（ ）： 。   wrap： ， 。   wrap-reverse： ， 。flexboxのサブ要素(拡張項目)の配置を設定します.
側軸(垂直)は伸縮項目のalign-itemsを揃えます.flex-start/baseline(項目の最初の行の文字のベースラインが揃えられます.)、flex-end、センター、streetch
align-selfに等しい
スピンドル対(水平)伸縮プロジェクト----justifty-content:flex-start、flex-end、センター、space-between、space-around
伸縮プロジェクトスタック伸縮航----align-content:flex-start、flex-end、センター、space-between、space-around、streetch
元素の配置順序を変える:order:flex-grow、flex-shrink、flex-basis;
flex-growは数値です 数値の取得値が大きいほど、後の方に並びます.そしてorderは負の値を取ることができます.   flex:1
flex-basisは数値+幅です.   flex:1 200 px;
flex-shrinkは収縮率と呼ばれています.この値は伸縮プロジェクトが主軸方向に伸び縮み容器があふれないと機能しません.flex:1 2 600 pxflex属性はflex-grow、flex-shrink、flex-basisの簡略であり、標準値は0 1 autoである.後の2つの属性を選択します.