flex布局
一 flex布局是什么
2009年，w3c提出一个新的布局，Flex布局。可以简便，完整，响应式的各种页面布局。各种浏览器可以实现，但是有兼容性，IE10+
任何一个元素都可以指定为flex布局。
.box{ display:flex; }
行内元素也可以是flex布局，.box{display:inline-flex}
webkit浏览器必须要加-webkit前缀：
.box{display:-webkit-flex;display:flex;}设为flex之后，float,clear,vertical-align属性失效。
二 基本概念
采用flex布局的是flex容器(flex container),它的子元素自动成为容器成员，成为容器成员，成为flex项目（flex-item），简称项目。
容器存在两个主轴，水平的主轴（main axis）和垂直的交叉轴（across axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三 flex的属性
任何一个元素都可以指定为flex布局。
.box{ display:flex; }
行内元素也可以是flex布局，.box{display:inline-flex}
webkit浏览器必须要加-webkit前缀：
.box{display:-webkit-flex;display:flex;}设为flex之后，float,clear,vertical-align属性失效。
二 基本概念
采用flex布局的是flex容器(flex container),它的子元素自动成为容器成员，成为容器成员，成为flex项目（flex-item），简称项目。
容器存在两个主轴，水平的主轴（main axis）和垂直的交叉轴（across axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三 flex的属性
- flex-direction
