用flex实现grid布局

1. css代码

.flexColumn(@columns, @gutterSize) {
  display: flex;
  flex-flow: row wrap;
  margin: calc(@gutterSize / -2);
  > div {
    flex: 0 0 calc(100% / @columns);
    padding: calc(@gutterSize / 2);
    box-sizing: border-box;
  }
}
1
2
3
4
5
6
7
8
9
10

2.用法

.grid-show-item3 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: calc(8px / -2);
  .flexColumn(3, 14px);
}

.grid-show-item2 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: calc(8px / -2);
  .flexColumn(2, 14px);
}

.grid-show-item4 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: calc(8px / -2);
  .flexColumn(4, 14px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3. 效果