Flexbox模型中的自动内边缘

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

假设在带有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_answers"两个"将彼此显示，彼此之间没有空间。一旦收缩浏览器窗口，两者都会垂直堆叠。我想在彼此相邻的同时将两个段落分开。

http://jsfiddle.net/whys2/

这只是部分可能。您必须处理媒体查询。

在下面的示例中，两个框都彼此相邻，但是如果没有足够的空间（为了确定，浏览器的视口小于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;
    }
}

当段落在同一条线上时，您是否希望它们之间的固定宽度边距，然后在第二段右侧添加的行中的任何额外空间？还是您希望第一个固定在左边，第二个固定在右侧，而两者之间的宽度差？您是否希望这些段落的宽度基于它们的内容？

当段落包裹到两行时，您仍然希望其宽度基于其内容，还是希望每个人都会扩展以填充其线的100％？

相关内容

最新更新

热门标签：