根据阮一峰老师的文章学习，整理的笔记
1.Flex布局是什么？
flex：flexible box的缩写，称为弹性布局
webkit内核的浏览器必须注意兼容性问题加上-webkit前缀
.box{
display:-webkit-flex;
display:flex;
}
设置为flex布局以后，子元素的float, clear,vertical-align等属性将会消失
2.基本概念
flex布局的容器内有两的轴：main axis 和 cross axis主轴和交叉轴
main start:主轴开始的位置
main end:主轴结束的位置
cross start:交叉轴开始的位置
cross end交叉轴结束的位置
main size:单个项目占据主轴的空间
cross size:单个项目占据交叉轴的空间
3.容器的属性：
3.1 flex-direction:主轴的方向（即项目排列的方向）
.box{
flex-direction:row | row-reverse | column | column-reverse
}
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
3.2 flex-wrap默认所有项目的排列在一条线上。flex-wrap定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap:nowrap | wrap | wrap-reverse
}
nowrap:不换行（默认）
wrap:换行（第一行在上方）
wrap-reverse:换行，第一行在下方
3.3 flex-flow 是flex-direction和flex-wrap的缩写形式，默认为row nowrap
.box{
flex-flow:<flwx-direction> || <flex-wrap>;
}
3.4 jusitify-content 定义了项目在主轴方向上的对齐方式
.box{
justify-content:flex-start | flex-end | center | space-between | space-around
}
space-between:两端对齐
space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目边框的间隔大一倍。
3.5 align-items项目在交叉轴上如何对齐
.box{
algin-items:flex-start | flex-end | center | baseline | stretch
}
baseline:项目的第一行文字的基线对齐
stretch:如果项目未设置高度或设为auto，将占满整个容器的高度
4.项目的属性
4.1order项目的排列顺序，数值越小，排列越靠前，默认为0
.item{
order:x x为整数
}
4.2flex-grow：定义项目的放大比例。默认为0， 即如果存在剩余空间，也不放大
如果所有的flex-grow属性都为1，则等分剩余空间
如果有一个值是2，其他都是1，则2那个项目占据剩余的空间将比其他项多一倍
4.3flex-shrink属性定义缩小比例
4.4flex-basis在分配多余空间之前，项目占据的主轴空间（main size）
4.5flex：是flex-grow，flex-shrink和flex-basis的缩写
常见的flex：1是什么意思呢？
flex：none ===> flex-grow:0;flex-shrink:0;flex-basis:auto;
flex:auto===> flex-grow:1;flex-shrink:1;flex-basis:auto;
flex:非负整数：
例如flex：1==> flex-grow:1;
flex-shrink:1;
flex-basis:0%;
例如在利用flex实现三栏布局时，为了让中间的盒子自适应常常对中间的盒子使用flex:1,z这里的1表示宽度比例，具体值取决于其他盒子的flex的值，其他盒子的宽度时固定的，所以中间的盒子就会自动填充剩余空间。
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.container{
display: flex;
}
.left{
background-color: aqua;
width: 300px;
height: 100px;
}
.center{
height: 100px;
flex: 1;
background: #f296ff;
}
.right{
height: 100px;
background-color: #6ee28d;
width: 300px;
}
flex:一个长度或者百分比
flex-grow:1;
flex-shrink:1;
flex-basis:0%;要取得的值
