CSS Flex项之间的静态填充

Question

我正在尝试在CSS中创建一个灵活的布局，它将根据客户端的分辨率进行换行。

例如，在横向的ipad（1024px宽）上，我想显示以下内容：

但是在肖像画（600px宽）的剧本中，我想显示以下内容：

除了20px的边距外，我几乎一切正常。我似乎无法弄清楚如何指定包裹元素的边距。

这是我的代码：

HTML：

<div class="box-row-fluid">
     <div class="col">Box 1</div>
     <div class="col">Box 2</div>
</div>

CSS：

.box-row-fluid {
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
}

.box-row-fluid > .col {
    -webkit-flex: 1 400px;
    background: #fff;
}

代码假定浏览器是有效的webkit浏览器。

我很感激一些帮助。谢谢你的时间。

Answer 1

你当然可以这样做My Fiddle（编辑background color以获得保证金可见性）

CSS

.col:nth-child(1) {
   margin-bottom: 20px;
}

要在水平方向2 div之间添加边距，您可以使用@media query作为特定分辨率，并为另一个添加margin-right: 20px;

说明：使用:nth-child(1)，因为您class="col"使用<div>

Answer 2

为什么不包含Twitter bootstrap？

这样可以解决这个问题。

<div class="row-fluid">
    <div class="span6">
        Content box 1
    </div>
    <div class="span6">
        Content box 1
    </div>
</div>

你唯一需要包括的是“网格系统”非常小而且效果很好！