元素之间的Flexbox边距和父包装的零边距

Question

Codesandbox示例：https://codesandbox.io/embed/silly-firefly-87cov

我们在父级内部具有随机数的元素。元素使用flexbox放置适合自己的位置。

问题：如何仅在元素之间而不是与父元素之间留出边距？

Answer 1

我想与您分享CSS Grid解决方案。我们可以使用grid-gap指定子项之间的间距。这样，我们就可以从父元素中删除margin并专注于更具声明性的布局。

const Parent = styled.div`
  display: grid;
  grid-auto-rows: 300px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 5px;
`;

const Element = styled.div`
  background-color: black;
  border: 1px solid green;
  color: white;
`;

CodeSandbox