Antd-栅格化布局（Row,Col）实现原理）

发表于 | 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
  * <Row gutter={[12, 12]}>
  *  <Col span={6}>
  *  </Col>
  * </Row>
  */
.row {
  display: flex;
  flex-flow: row wrap;
  row-gap: 12px; /** gutter[1]的值 */
  margin-left: -6px; /** (-gutter[0]/2)的值 */
  margin-right: -6px; /** (-gutter[0]/2)的值 */
}

.col {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 6px; /** (gutter[0]/2)的值 */
}