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"