看看这个-我使用calc来调整flex-basis，以允许您可以为ul分发自定义margin（使用justify-content: space-between来分发该保证金）。

ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: gold;
  margin: 10px;
  padding: 0;
  height: 100px;
}
li {
  flex-basis: calc(25% - 20px);
  background: grey;
}

个字符
让我知道你的反馈。谢谢！

由于这是我想添加的第一个Google结果，因此可以使用新的“gap”属性来完成：

ul {
    gap: 8px; 
}

字符串

一个更简单的解决方案（在通用用例中）：
假设你有如下两个元素：
你可以使用下面的css来获得相同的元素间距。
范例：

.elem1 {
    display: flex;
    flex-wrap: wrap;
    margin-left: 8px;
    margin-top: 8px;
}

.elem2 {
    margin-right: 8px;
    margin-bottom: 8px;
}

个字符
这样就可以在外部边界以及元素之间（在x或y方向上）实现相同的间距，而无需任何额外的计算。虽然justify-content: space-between或justify-content: space-around可以具有类似的效果，但它也可以使所有内容居中。
React Example（with Material UI）

render() {
    return (
        <Box display="flex" flexWrap="wrap" ml={1} mt={1} >
            {this.service.items().map(element =>
                <Box key={element.id} mr={1} mb={1} >
                    <Card entity={element} />
                </Box>
            )}
        </Box>
    )
}

型