flex布局方式之父容器

没有学到死,就往死里学。
最近学习了微信小程序,才接触到了这一布局方式,大概试了一下,记录:

使用方式:

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;
    }
    设为Flex布局以后,子元素的float、clear和vertical-align属性将失效

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