我正在尝试使用Flexbox创建自己的网格。我不想使用Bootstrap或任何其他框架,所以请不要链接其中任何一个。

在我的flex-container中,我想显示两个部分,它们都是页面宽度的100%。因此,一个部分应该位于另一部分的顶部。取而代之的是,即使我明确定义了100%,也会为每个部分提供页面宽度的50%。我不知道为什么会这样。浏览器的开发人员工具也无法得出任何结论。

我在jsFiddle中重建了问题。如果我将一个部分定义为页面宽度的7/12,将另一部分定义为页面宽度的5/12,则可以得到预期的结果。

的HTML

<div class="flex-container">
    <div class="flex-12">
        <h4>Title</h4>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
        <p class="flex-2">Content</p>
    </div>
    <div class="flex-12">
        <h4>Title 2</h4>
    </div>
</div>

最佳答案

需要告诉容器允许包装,因为默认值为nowrap

.flex-container {
    display: flex;
    flex-wrap:wrap;
}


Jsfiddle Demo

07-24 09:50
查看更多