css 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;
		}

  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 即初始值

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