没有学到死，就往死里学。
最近学习了微信小程序，才接触到了这一布局方式，大概试了一下，记录：
使用方式：
1. html
1
2
3
4
5
6
7
8
9
10
11
| <div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
|
2. 定义基本css样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
| body{
background: #c0ffb6;
}
.container{
width: 100%;
height: 100%;
}
.item{
width: 150px;
height: 200px;
background-color: #4cae4c;
margin: 2px;
}
|
3. 设置父容器为flex布局：
- div 块儿级元素
1
2
3
4
5
| .container{
width: 100%;
height: 100%;
display: flex;
}
|
- 或者 行内元素
1
2
3
4
5
| .container{
width: 100%;
height: 100%;
display: inline-flex;
}
|
4. flex-direction 属性：
决定容器里面元素的排列方式
横向排列
横向反转排列
纵向排列
纵向反转排列
1
2
3
4
5
6
| .container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
|
5. flex-wrap 属性
横向排列的子元素是否换行
在子元素的大小超出了父容器的大小以后是换行显示
不换行： nowrap 设置了不换行以后，子元素的大小将。。
1
2
3
4
5
6
7
8
9
10
11
12
13
| .container{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.item{
width: 650px;
height: 200px;
background-color: #4cae4c;
margin: 2px;
}
|
6. justify-content 属性
子元素的对齐方式
左对齐
右对齐
居中显示
相等间隔
1
2
3
4
5
6
7
8
| .container{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
|
7. align-items:
决定子元素在垂直位置上的对齐方式
1
2
3
4
5
6
7
8
9
| .container{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: flex-end;
}
|
8. align-self 属性
决定当前元素的对齐方式，用于覆盖父容器的align-items 属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| .container{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.item{
width: 450px;
height: 200px;
background-color: #4cae4c;
margin: 2px;
}
.item1{
height: 120px;
align-self: flex-end;
}
.item2{
height: 100px;
}
.item3{
height: 150px;
}
|