flexbox 模型中的自动内边距答案

【问题标题】：Automatic inner margins in the flexbox modelflexbox 模型中的自动内边距
【发布时间】：2012-10-25 06:30:39
【问题描述】：

这是关于新的灵活框布局模型的问题。

假设在带有display: flex; 的容器内我有两个项目。当容器足够宽时，两个item都是水平布局的，否则flexbox布局机制会让它们垂直堆叠。我想要的是当它们彼此相邻时在两个项目之间有一个内边距，但是当它们必须堆叠在一起时我希望这个边距消失。

FlexBox 模型可以做到这一点吗？

例如，可以使用以下文档，该文档已使用最新版本的 Chrome 进行了测试：

<!DOCTYPE html>
<title>Flex Box</title>
<style>
    body {
        font-size: 100px;
    }
    .container {
        display: -webkit-flex;
        display: flex;  
        -webkit-flex-wrap: wrap;    
        flex-wrap: wrap;
    }
</style>
<div class="container">
    <p>
        One
    </p>
    <p>
        Two
    </p>
</div>

当外部 div 有足够的水平空间时，“One”和“Two”彼此相邻显示，中间没有空格。一旦缩小浏览器窗口，两者就会垂直堆叠。我希望两个段落彼此相邻时用一个边距分隔。

http://jsfiddle.net/WHYS2/

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

这只是部分可能。你必须使用Media Queries。

在下面的示例中，两个框彼此相邻，但是当空间不足时（例如，浏览器的视口小于 800 像素），两个框彼此相邻。

在http://jsfiddle.net/tjNhF/ 观看此演示并调整浏览器窗口的大小。

HTML：

<div class="box">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tellus non dui eleifend viverra. Proin quis nunc purus. Suspendisse at quam nisl, nec posuere mi. Donec nec nisi eros. Fusce vel orci quam. Cras urna arcu, hendrerit in consequat in, faucibus vitae nulla. Donec a urna risus. Proin posuere. </p>
    </div>
    <div>
        <p>Nulla magna felis, facilisis vel adipiscing et, bibendum ac tellus. Pellentesque in risus in leo scelerisque adipiscing quis ut augue. Etiam luctus nisi sit amet nulla ullamcorper quis commodo purus volutpat. Sed est nisl, facilisis non vestibulum sed, auctor et odio. Aenean eget neque urna, a hendrerit ipsum. Sed sollicitudin.</p>
    </div>
</div>

CSS：

@media all {
    body {
        background-color: #aaffaa;
    }

    .box {
        width: 100%;
        border: 1px solid #555;

        display: -webkit-box;
        -webkit-box-orient: horizontal;

        display: -moz-box;
        -moz-box-orient: horizontal;

        display: box;
        box-orient: horizontal;
    }

    .box > div {
        padding: 1em 5em;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
    }

    .box > div:nth-child(1){ background : #abc; }
    .box > div:nth-child(2){ background : #bca; }
}

@media (max-width: 800px) {
    body {
        background-color: #ffaaaa;
    }

    .box {
        box-orient: vertical;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
    }
    .box > div {
        padding-left: 0;
        padding-right: 0;
    }
}

【讨论】：

感谢您设置演示。使用媒体查询当然是一种选择，但如果我不知道内部项目的宽度，它的用处就会降低。也不需要“手动”切换到垂直方向，因为当主轴的一条线没有足够的空间时，flexbox 模型会自动开始分解主轴。顺便说一句，您使用的是旧的 flexbox 模型，但当前的 W3C 推荐可能不会增加太多功能。
也许您可以将现有代码添加到您的第一篇文章中，以便我们调整您的代码和您的 flexbox 版本。

【解决方案2】：

当段落在同一行时，您是否希望它们之间有一个固定宽度的边距，然后在第二段右侧添加行中的任何额外空间？或者你想要第一个固定在左边，第二个固定在右边，中间有一个可变宽度的边距？您是否希望段落的宽度像现在一样基于其内容？

当段落换成两行时，您仍然希望它们的宽度基于它们的内容，还是希望每个段落都扩展以填充 100% 的行？

【讨论】：

就我目前的想法而言，段落的宽度应该基于它们的内容，并且行中的任何额外空间都应该添加到第二段的右侧。（当段落被换成两行时也是如此，例如右侧的任何额外空间。）