响应式flexbox - 包装后将边距从水平变为垂直？

Question

我有一个简单的布局概念，可以通过这张图片进行总结：

使用flexbox可以轻松实现这一点。如您所见，div＃1和div＃3触及其容器的边框。此外，div＃1和div＃2之间的余量等于div＃2和div＃3之间的余量。可以通过以下方式完成：

.inner-div{
   margin-left:10px;
}

.inner-div:first-child{
    margin-left:0px;
}

现在，假设视口宽度减小。我希望这些div包装形成一个很好的列。我希望他们看起来像这样：

但如果这些div保留其水平边距配置，则它们看起来像这样：

你可以猜测，这是不可取的。

当容器如此狭窄以至于包裹起来时，如何更改那些内部div的边距？＃34 ;?有没有办法编写一个条件规则，只适用于＆＃34; wrapped＆＃34; DIVS？或者我错过了重点，解决方案非常明显，我只是忽略了flex-box能力的那部分？ 我希望看到一个解决方案，它不会涉及预测容器/屏幕宽度会使布局在行之间变化，因为我认为这是最易维护的选项。

Answer 1

您绝对可以使用负边距来实现这一目标。

看看这个小提琴：http://jsfiddle.net/287vW/

如果你甚至不打算从第一个元素中删除边距但是保留它，并且全局减少容器的边距，你将得到一致的结果。

假设您有以下结构：

<div class="margin">
    <div class="container">
        <div class="box one"></div>
        <div class="box two"></div>
        <div class="box three"></div>
    </div>
</div>

然后你可以应用这些样式：

.margin {
    border:3px solid #000000;
}

.container {
    display:flex;
    flex-wrap:wrap;
    margin:-10px 0 0 -10px;
}

.box {
    height:100px;
    background-color:#555555;
    margin:10px 0 0 10px;
    flex-grow:1;
    min-width:300px;
}

即使我们保留元素的所有边距，容器的负边距也会删除它们。

咨询上面提到的JS Fiddle以获得结果。

我确信这可以通过减少一个div来实现，但我认为你现在可以自己解决这个问题。

希望它有所帮助：）

P.S。：如果您想了解更多有关负边距的信息，请参阅有关粉碎mag的文章：http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Answer 2

是的，请查看media queries。

另外，我做了一点jsfiddle，你可以在一个非常简单的层面上看到它。 只需将垂直条向右移动，您就会看到媒体查询发挥其神奇作用。

@media (max-width: 200px){
    .inner-div {
        margin: 0 0 10px 0;
        float: none;
    }

    #one{
        margin: 0 0 10px 0;
    }

    #three {
        margin: 0px;
   }
}

如果您在jsfiddle中删除媒体查询，它将只是您所描述的。