CSS Flex项之间的静态填充

Question

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

例如,在横向(1024px宽)的ipad上,我想显示以下内容:

但是在肖像画(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

你当然可以这样做我的小提琴（编辑background color边距可见性）

CSS

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

要在水平方向上添加 2 之间的边距，div您可以对特定分辨率使用@media 查询margin-right: 20px;，并为其他分辨率添加边距

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