在前篇博文中已经详细叙述了flex布局中的容器属性,那么现在就来谈谈flex项目属性那些事······
以下6个属性是作用在flex项目上的:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1.1 order属性
该属性定义项目的排列顺序,数值越小,排列越靠前,默认值为0。用法及效果如下:
html代码
<div class="flex-box">
<div class="flex-item">item1</div>
<div class="flex-item">item2</div>
<div class="flex-item">item3</div>
</div>
css代码
.flex