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;
}