我要评论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 即初始值
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论