html - CSS柔性盒和内部填充物

我试图仅将内部填充/间距添加到彼此浮动的网格中的三列中。因此，填充将不会应用于第一列的左侧和最后一列的右侧。

下图说明了我要实现的目标：

 

对于具有两列的网格，我只需执行以下操作：

.grid .size-1of2 {
    width: 50%
}
.grid .column.size-1of2:first-of-type {
    padding: 0 5px 0 0;
}
.grid .column.size-1of2:last-of-type {
    padding: 0 0 0 5px;
}

它起作用了，因为列之间的间隔是10px！但是，现在当我尝试对3列，4列和5列的网格执行相同操作时。事情变得一团糟！

到目前为止，这是三列网格的内容：

.grid .size-1of3 {
    width: 33.33333%
}
.grid .column.size-1of3 {
    padding: 0 4px 0 4px;
}
.grid .column.size-1of3:first-of-type {
    padding: 0 7.5px 0 0;
}
.grid .column.size-1of3:last-of-type {
    padding: 0 0 0 8.5px;
}

html确实很简单，请注意：.column由下面描述的plugin（1）生成：

<div class="grid columns3">
   <div class"column size-1of3">
     <div></div>
   </div>
   <div class"column size-1of3">
     <div></div>
   </div>
   <div class"column size-1of3">
     <div></div>
   </div>
</div>

问题是：
解决此问题的最佳方法是什么？在列之间具有10px的内部间隙并保持一致的列宽？

我正在使用此插件（1）创建网格系统http://savvior.org-该插件纯粹创建请求的列并对其内的元素进行平均排序。因此，填充只是一种样式功能，插件无法执行，但是我正在尝试实现。

实时测试站点：http://loai.directory/test-grid

最佳答案

您可以使用flex-boxes，这就是它们的意思！

只需设置.grid {display:flex ; flex-wrap: nowrap}

并检查神奇的flex-box属性；

另请阅读文档以获取完整的属性规范。