css 作为弹性伸缩盒 display:flex

       .fbox{
		    display: flex;
			-webkit-display: flex;
			-ms-display: flex;
			width: 100%;
			height: 200px;
		}
		.fbox .center{
			flex: 1;
			height: 200px;
			background: #f00;
			border-radius: 5px;
			margin:0 10px;
		}
		.fbox .left,
		.fbox .right{
			width: 200px;
			height: 200px;
			background: #f0f;
		}
		.fbox .left{
			background: #0f0;
		}

display:flex

display:inline-flex

webkit内核应使用前缀 -webkit-
ie10浏览器中容器定义成弹性伸缩盒 用前缀 -ms-

flex 作用于容器上的6个属性介绍

定义行和列
flex-direction:row | row-reverse | column | column-reverse;
定义是否换行
flex-wrap:nowrap | wrap | wrap-reverse;

flex-flow:复合属性，是flex-direction 和 flex-wrap 的简写属性，是用于指定flex子项的排列方式

flex-flow:row wrap;

定义横向对齐
justify-content:flex-start | flex-end | center | space-between | space-around;
纵向对齐
align-items:stretch | flex-start | flex-end | center | baseline;

flex 作用于子项上的6个属性介绍

order:0; /*排序*/
flex-grow:0; /*定义扩展排序*/
flex-sherk:1; /*定义收索排序*/
flex-basis:auto | length | percentage | content; /*指定空间*/

flex复合属性，是flex-grow 、 flex-shrink 和 flex-basis 的简写属性

none：0 0 auto
auto：1 1 auto
1：1 1 0%
0 auto 或 initial：0 1 auto 即初始值