响应式弹性框 - 换行后将边距从水平更改为垂直？

Posted 2023-03-06

【中文标题】响应式弹性框 - 换行后将边距从水平更改为垂直？

【英文标题】：Responsive flexbox - change margins from horizontal to vertical after wrapping?

【发布时间】：2014-09-03 14:53:27

【问题描述】：

我有一个简单的布局概念，可以用这张图来概括：

这可以使用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 功能的那一部分？ 我希望看到一个不涉及预测什么容器/屏幕宽度会导致布局从行更改为列的解决方案，因为我认为这是最易于维护的选项。

【参考方案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 以获得结果。

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

希望它有所帮助:)

P.S.：如果你想了解更多关于负边距的信息，请看这篇关于粉碎杂志的文章：http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

【参考方案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 中的媒体查询，它看起来就像你描述的那样。

【讨论】：

我觉得这个方案太不灵活了。对我来说使用flex-box 的唯一目的是不用担心媒体查询，让布局决定flex-boxed div 内的流程。使用您的解决方案，我必须预测哪些屏幕尺寸会影响内部 div。而且，根据各种因素（例如视口宽度、布局、其他 div 中的文本长度）选择正确的断点非常麻烦，这使得该解决方案非常难以维护。我正在寻找更灵活和可维护的解决方案。