CSS flex 布局(入门)- flex 简写属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。默认值:0 1 auto。

flex: <flex-grow> <flex-shrink> <flex-basis>;

让项目占满剩余空间 :

<style>
	div{ display: flex; }
	.sp{flex: 1;}
</style>

<div>
	<span class="sp">1</span>
	<span>2</span>
	<span>3</span>
</div>

以上实例中,水平主轴排列方向,存在有剩余空间时,“1” 的项目占满剩余空间。

兼容性 :

属性 IE Chrome Firefox Safari Opera
flex 10.0 -ms-
11.0
21.0 -webkit-
29.0
18.0 -moz-
28.0
6.1 -webkit-
9.0
17.0

JavaScript 语法:

object.style.flex="1";