响应式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的边距？有没有办法编写一个只适用于"包装"div的条件规则？或者我错过了重点,解决方案非常明显,我只是忽略了那部分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来实现,但我认为你现在可以自己解决这个问题.

希望它有帮助:)

PS:如果你想了解更多关于负边距的信息,请参阅这篇关于粉碎mag的文章:http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/