html - CSS flex 盒子和内部填充

Question

我正在尝试仅将 内部 填充/间距添加到网格中相互 float 的三列。因此填充不会应用于第一列的左侧和最后一列的右侧。

下图展示了我正在努力实现的目标:

对于有两列的网格，我只是做了以下操作:

.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;
}

它奏效了，因为列之间的空间是 10 像素!但是，现在当我尝试对具有 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 - 插件纯粹创建请求的列并对其中的元素进行平均排序。所以 padding 只是一个样式功能，插件没有，但我正在尝试实现。

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

Answer 1

你可以使用 flex-boxes , 这就是它们的意义!!

只需设置 .grid {display:flex ; flex 包装:nowrap

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

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