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。

JavaScript 语法：

object.style.flexBasis="200px"