CSS flex 布局(入门)- flex-basis 项目基准值

flex-basis 属性设置在项目上,设置项目的基准值。这个值与排列方向有关,具体看以下实例。

实例一:

<style>
	div{ display: flex; flex-direction: column;}
	.sp{flex-basis: 100px;} /* 也能设置百分比 */
</style>

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

以上实例中,设置排列方向为垂直主轴,那么设置项目 flex-basis: 100px; 就是设置项目的初始高度为 100px。

如果是为水平主轴,那么就是设置项目的初始宽度为 100px。

实例二:

<style>
	div{ display: flex; flex-direction: row;}
	span{ width: 200px;}
	.sp{flex-basis: 100px;}
</style>

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

以上实例中,在有 width 和 flex-basis的情况下,flex-basis 的值会覆盖 width。

兼容性 :

属性 IE Chrome Firefox Safari Opera
flex-basis 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.flexBasis="200px";