Question

这是关于新的Flexible Box布局模型的问题。

假设在display: flex;的容器中我有两个项目。当容器足够宽时，两个项目都是水平布局的，否则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/

Answer 1

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

在下面的示例中，两个框彼此相邻，但是当没有足够的空间时（对于instace，浏览器的视口小于800px），这些框是彼此之间的。

在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;
    }
}

Answer 2

当段落在同一行时，你想要它们之间有一个固定宽度的边距，然后在第二段右边添加的行中有多余的空格吗？或者您希望第一个固定在左侧，第二个固定在右侧，两者之间的宽度可变？你想让段落的宽度基于它们的内容，就像它们现在一样吗？

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

flexbox模型中的自动内边距

2 个答案: