Css Block

Flex

简单使用


<div class="flex">
    <div class="flex-box"></div>
    <div class="flex-box"></div>
    <div class="flex-box"></div>
</div>
1
2
3
4
5
.flex {
    display: flex;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
    margin: 20px;
}
1
2
3
4
5
6
7
8
9

纵向排列


<div class="flex" style="flex-direction:column">
    <div class="flex-box"></div>
    <div class="flex-box"></div>
    <div class="flex-box"></div>
</div>
1
2
3
4
5
.flex {
    display: flex;
    flex-direction: column;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
    margin: 20px;
}
1
2
3
4
5
6
7
8
9
10
11

折行排列


<div class="flex">
    <div v-for="n in 8" class="flex-box"></div>
</div>
1
2
3
.flex {
    display: flex;
    flex-wrap: wrap;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
    margin: 20px;
    flex-shrink: 0;
}
1
2
3
4
5
6
7
8
9
10
11

折行排列等分间距（固定外层宽度）


<div class="flex">
    <div v-for="n in 10" class="flex-box"></div>
</div>
1
2
3
.flex {
    display: flex;
    flex-wrap: wrap;
    width: 680px; /*120 * 5 + 20 * (5 - 1)*/
    background: #dcdbdb;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
}
.flex .flex-box:nth-child(5n) {
    margin-right: 0;
}
.flex .flex-box:nth-last-child(-n + 5) {
    margin-bottom: 0; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

折行排列等分间距（外层宽度不固定）


<div class="flex">
    <div v-for="n in 10" class="flex-box"></div>
</div>
1
2
3
.flex {
    display: flex;
    flex-wrap: wrap;
    background: #dcdbdb;
}
.flex .flex-box {
    width: calc((100% - 20px * 4) / 5);
    height: 120px;
    background-color: #3eaf7c;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
}
.flex .flex-box:nth-child(5n) {
    margin-right: 0;
}
.flex .flex-box:nth-last-child(-n + 5) {
    margin-bottom: 0; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

折行排列最后一行处理

或许你在使用 justify-content: space-around/space-between 时会遇到这种情况 

<div class="flex">
    <div v-for="n in 7" class="flex-box"></div>
</div>
1
2
3
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
    margin: 20px;
    flex-shrink: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12

可以用 js 自动补全剩余的空间，并且将它们隐藏起来 

<div class="flex">
    <div v-for="(item, index) in list" class="flex-box"></div>
    <div v-for="(item, index) in listLeft" class="flex-box" style="visibility:hidden"></div>
</div>
1
2
3
4
export default {
    data() {
        return {
            list: [1, 2, 3, 4, 5, 6, 7]
        }
    },
    computed: {
        listLeft() {
            let rowCount = 4
            if(this.list.length % rowCount) {
                return new Array(rowCount - this.list.length % rowCount)
            }
            return []
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.flex .flex-box {
    width: 120px;
    height: 120px;
    background-color: #3eaf7c;
    margin: 20px;
    flex-shrink: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12

← 水平垂直居中 →