饿了么项目开始---css3的flex布局，开发移动端界面

本节重点：
- flex布局的用法
- 参考学习阮一峰的博客

什么是flex布局

采用flex布局的元素，叫flex容器，所有子元素自动成为容器成员，叫flex项目

.box{
display:flex;
display:-webkit-flex;
}

子元素的float、clear、vertical-align 属性失效

容器的属性

• flex-direction:row(默认) | row-reverse | column | column-reverse
  
  • 决定项目的排列方向
• flex-wrap: nowrap(不换行 默认) | wrap（换行，第一行在上方） | wrap-reverse（换行，第一行在下方）;

简写

• flex-flow：row nowrap(默认)

• justify ：flex-start | flex-end | center | space-between | space-around

  • 项目在主轴上的对齐方式

项目属性（常用）

• flex-grow:0（默认，存在放大空间时也不放大）| 分配空间时放大倍数
  
  • 项目的放大比例
• （可选）、flex-shrink:1（如果空间不足，项目将缩小）| 0不缩小
  
  • 项目缩小比例
• （可选）、flex-basis：auto（项目本身大小）
  
  • 可以设置width/height,则项目占据固定空间

简写

• flex：0 1 auto（默认值）