flex小记

 align-items 是在nowrap时，对一行进行的设置

align-content 是在wrap时，对所有进行的设置。

子元素：

flex-grow :默认值是0 。 他们分配的是剩下的空间，如果没有剩下的空间，就没效果。

flex-shrink:默认值是1.它是指在进行压缩的时候，他的收缩能力。值越大，收缩的越快。

flex-basis: 设置成百分比，可以直接决定他占用的宽度。默认是auto。默认的时候就根据flex-grow。

 

如果 flex-direction 被设置成了 column,其实相当于把屏幕左旋90度。然后按照正常的方式进行设置。

order 不是flex-order!

如果我们设置了具体的宽度200px---使用flex-grow设置了，并且可以换行wrap。如果容器的宽度小于总的宽度和了，最后一个元素会随着宽度不够被挤下来。

 

 display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  

http://www.runoob.com/try/try.php?filename=trycss3_flex-basis
http://www.45it.com/css/201407/37606.htm

flex-basis :如果设置成具体的值，是 所占的值就是 容器宽度*（自己的值/所有值的和）
如果是百分比： 凑够100%，就按上面算。

flex-grow 是受宽度影响的， flex-basis 被挤下来之后，是否去占满还是保持原位置留空，要看flex-grow 设置，如果设置为0，表死不对剩余空间处理，就会留空。