我尝试使用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>
答案 0 :(得分:2)
答案 1 :(得分:2)
您也可以使用flex-direction列:
.flex-container {
display: flex;
flex-direction: column;
}