CSS灵活盒子＆amp;内衬垫

Question

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

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

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

.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是由下面描述的插件（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 内部 gab并保持一致的列宽度？

我正在使用此插件（1）来创建网格系统http://savvior.org - 插件纯粹创建请求的列并对其中的元素进行相等的排序。所以填充只是一个样式功能，插件不会，但我试图实现。

现场测试网站：http://loai.directory/test-grid

Answer 1

你可以使用flex-boxes，这就是他们的意思!!

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

即可

并查看magic flex-box属性;

还阅读完整属性规范的文档。