css3 弹性布局flex-basis属性 设置弹性元素在主轴上占据的空间
flex-basis
表示项目在(当前的主轴:水平轴)主轴上占据的空间,默认值为auto
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
css:
.container {
display: flex;
display: -webkit-flex;
outline: 1px dashed red;
width: 900px;
margin: 200px auto;
}
.item {
height: 220px;
}
/* flex-basis 表示项目在(当前的主轴:水平轴)主轴上占据的空间,默认值为auto。 */
.item1 {
background-color: pink;
/* 设置当前 弹性元素在主轴上 占据的空间 是160px(可以取单位是:像素或百分百) */
flex-basis: 160px;
}
.item2 {
background-color: lightblue;
/* 设置当前 弹性元素在主轴上 占据的空间 是340px */
flex-basis: 40%;
}
.item3 {
background-color: lightgreen;
/* 设置当前 弹性元素在主轴上 占据的空间 是300px */
flex-basis: 300px;
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果