Css 瓷砖之间的等间距

Css 瓷砖之间的等间距,css,flexbox,css-grid,Css,Flexbox,Css Grid,可以显示8个平铺250px 250px,平铺(行和列)之间的间隙相等。在花费数小时试图实现我想要的结果之后,我得出结论,Flex在这种情况下不起作用。我有一个父div和8个子div。如有任何建议,将不胜感激 .parent{ 显示器:flex; 证明内容:中心; 对齐项目:居中; 柔性包装:包装; 柔性流:行换行; 证明内容:之间的空间; } .儿童{ 边框:2件纯黑; 宽度:250px; 高度:250px; } 瓦片 瓦片 瓦片 瓦片 瓦片 瓦片 瓦片 瓦片 在flexbox可用之前,您需

可以显示8个平铺250px 250px,平铺(行和列)之间的间隙相等。在花费数小时试图实现我想要的结果之后,我得出结论,Flex在这种情况下不起作用。我有一个父div和8个子div。如有任何建议,将不胜感激

.parent{
显示器:flex;
证明内容:中心;
对齐项目:居中;
柔性包装:包装;
柔性流:行换行;
证明内容:之间的空间;
}
.儿童{
边框:2件纯黑;
宽度:250px;
高度:250px;
}

瓦片
瓦片
瓦片
瓦片
瓦片
瓦片
瓦片
瓦片
在flexbox可用之前,您需要找到解决方案

不过,网格布局很简单

.parent{
显示:网格;
网格模板列:重复(自动填充,250px);
网格自动行:250px;

网格间距:10px;您可以使用纯flex实现它。 尽管如此,我个人还是会使用CSS网格,比如@Michael Benjamin的答案

.parent{
背景:红色;
显示器:flex;
柔性包装:包装;
宽度:500px;
证明内容:之间的空间;
}
.儿童{
弹性基准:245px;
显示:内联块;
背景:绿色;
边缘底部:10px;
}

瓦片
瓦片
瓦片
瓦片
瓦片
瓦片
瓦片
瓦片