0

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

假设在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 有足够的水平空间时，“一”和“二”并排显示，中间没有空格。一旦缩小浏览器窗口，两者就会垂直堆叠。我想让两个段落彼此相邻时用一个边距分隔。

http://jsfiddle.net/WHYS2/

4

2 回答 2

1

这只是部分可能的。您必须使用媒体查询。

在下面的示例中，两个框彼此相邻，但是当空间不足时（例如，浏览器的视口小于 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;
    }
}
于 2012-11-05T13:39:56.367 回答
0

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

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

于 2012-11-09T01:57:25.763 回答