flex布局方式之子元素

 你必须很努力,才能看上去毫不费力
最近学习了微信小程序,才接触到了这一布局方式,大概试了一下,记录之

1. 布局html

1
2
3
4
5
6
7
8
9
10
11
<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 class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>

2.order 属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

1
2
3
4
5
6
.item1{
order: 2;
}
.item2{
order: 1;
}

3. flex-grow属性

即如果子元素在父容器的横向上还没有撑满,左或者右都存在空间
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

1
2
3
4
.item1{
order: 2;
flex-grow: 2;
}

如果三个元素都设置这样的属性,则由这三个元素一起撑满剩余的部分

1
2
3
4
5
6
7
8
9
10
.item1{
flex-grow: 1;
}
.item2{
order: 1;
flex-grow: 1;
}
.item3{
flex-grow: 1;
}

4. flex-shrink属性

如果所有的子元素的宽度已经超过了父容器的宽度,而且设置了不能换行,这时候如果某个元素设置了这样的属性,
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

1
2
3
4
5
6
.item2{
flex-shrink: 2;
}
.item3{
flex-shrink: 2;
}