css3 弹性盒子对象元素order的顺序
order 属性 设置或检索弹性盒模型对象的子元素出现的順序:数值越小越靠前 排列,数值越大越靠后排列,默认值为0,可以为负值。
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
css:
.container {
display: flex;
flex-flow: column;
display: -webkit-flex;
outline: 1px dashed red;
width: 600px;
margin: 200px auto;
}
.item {
width: 150px;
height: 150px;
background-color: #b4b4b4;
margin: 10px;
}
代码演示:
在此基础上添加order属性以此调整排放顺序:
/* 设弹性元素的(在主轴上的)排列顺序 数值越小越靠前 排列,数值越大越靠后 排列。 */
.item1 {
order: 3;
}
.item2 {
order: 1;
}
.item3 {
order: 2;
}
/* .item4这个元素,是排列最靠前的元素 */
.item4 {
order: -1;
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果