效果
一、flex实现
html
<!DOCTYPE html>
<html><head><title>Flexbox Layout</title><style>.container {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 10px;border: 1px solid red;}.box {flex: 1 0 calc(25% - 10px);height: 100px;background-color: #ccc;border: 1px solid black;}.box:first-child,.box:last-child {flex-grow: 0;}</style></head><body><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></body>
</html>上述代码使用了display: flex将父级容器.container设置为Flex容器，并使用flex-wrap: wrap使子元素在容器宽度不足时换行。justify-content: space-between将子元素在主轴上均匀分布，并保持首尾子元素与父容器之间的距离。
每个子元素.box使用flex: 1 0 calc(25% - 10px)来平均占据父容器的宽度，并且通过calc()函数来减去间隙的宽度。你可以根据自己的需求调整.box元素的高度、背景颜色和边框样式。
.box:first-child和.box:last-child分别选择第一个和最后一个子元素，使用flex-grow: 0来防止它们在主轴上拉伸。
通过调整容器和子元素的样式，你可以实现具有两行、四个子元素的Flexbox布局，同时满足你的要求：首尾子元素与父容器挨着，中间子元素有一定的距离，并且首层和底层以及行与行之间都有间隙。
二、grid实现
html
<!DOCTYPE html>
<html><head><title>CSS Grid Layout</title><style>.container {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;border: 1px solid red;}.box {height: 100px;background-color: #ccc;border: 1px solid black;}</style></head><body><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></body>
</html>
