flexレイアウト(弾性箱レイアウト、箱レイアウト)

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)
レイアウトの伝統的な解決策は、ボックスモデルに基づいて、依存性があります.  display 属性+  position属性＋  float属性です.これらの特殊な配置には非常に不便です.例えば、垂直方向の中央に配置すると簡単に実現できません.
1.伝統的なborderの影響を解決する
  一行は4つのdivブロックを表示して、両端は枠を貼っています.
ul{display:flex}
    flex-wrap:wrap;
 }
 li｛
    width:24.4%;min-width:280 px;height:75 px;magin-right:0.8%;magin-top:10 px;
     border:1 px sold red;
    border-box;
)  
li:nth-child(4 n+4){magin-right:0}
2.flex
  1.どのコンテナもFlexレイアウトに指定できます.

.box{
  display: flex;
}

 2.行の要素もFlexレイアウトを使用できます.

.box{
  display: inline-flex;
}

 
3.Webkitカーネルのブラウザは、-webkitプレフィックスを追加しなければなりません.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

なお、Flexレイアウトに設定すると、サブ要素のfloat、clear、vertical-align属性は無効になります.
基本概念:
Flexレイアウトを採用した要素をFlex容器(flex container)といい、略して「容器」といいます.そのすべてのサブ要素は自動的に容器のメンバーになります.Flexプロジェクト(flex item)と呼ばれ、略称は「プロジェクト」です.
容器にはデフォルトで2つの軸があります.水平の主軸と垂直の交差軸があります.主軸の開始位置(外枠との交差点)はmain startといい、終了位置はmain endといいます.交差軸の開始位置はcross startといい、終了位置はcross endといいます.
項目のデフォルトは主軸に沿って並べられています.単一の項目が占める主軸空間はmain sizeといい、占有するクロス軸空間はcross sizeといいます.
 flex容器の6つの属性:

flex-direction     属性決定主軸の方向(すなわち項目の配置方向)

flex-wrap             もし一つの軸が並べられないなら、どうやって改行しますか?

flex-flow              flex-direction属性とflex-wrap属性の簡略形式であり、標準値はrow nowrapである.

justify-content      主軸に項目の配置を定義しました.

align-items         クロス軸上の項目の配置を指定します.

align-content      複数の軸線の配置が定義されています.項目が1本の軸線しかない場合、この属性は機能しません.

.box {
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow:  || ;//  row nowarp
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: flex-start | flex-end | center | baseline | stretch;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flexプロジェクトの6つの属性:

order        は、項目の並び順を定義します.数値が小さいほど、前に並べるほど、デフォルトは0です.

flex-grow     は、プロジェクトの拡大率を定義し、デフォルトは0である.すなわち、空きスペースがあれば、

を拡大しない.

flex-shrink    は、プロジェクトの縮小比率を定義しています.デフォルトは1です.すなわち、スペースが足りないと、プロジェクトは縮小されます.

flex-basis   は、余分な空間を割り当てる前に、プロジェクトが占有する主軸空間を定義しています.標準値はauto、すなわちプロジェクトの本来の大きさです.

flex     はflex-growであり、  flex-shrink 和  flex-basisの簡略化、標準値は0 1 autoです.後の2つの属性はオプションです.

align-self    は、単一の項目が他の項目とは異なる配置でalign-items属性をカバーすることができるようにする.デフォルト値はautoで、父の後を継ぐことを示す.                                     要素のalign-items属性は、親要素がない場合はstretchに等しい.

.item {
  order: ; 0-1，     
  flex-grow: ; /* default 0 */    
  flex-shrink: ; /* default 1 */    
  flex-basis:  | auto; /* default auto */          150px
  flex: none | [  ? ||  ]
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  
}

flexプロジェクトもwidth:xx%で処理できます.