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"