Inline-Flex父级不包括子级

时间:2019-06-05 11:51:36

标签: css flexbox

我有固定高度的容器(蓝色),该容器应彼此相邻显示。每个容器将具有不同数量的盒子(绿色),应按列订购,例如像这样:

how it shall be displayed

我尝试了以下代码:

.container {
	height: 300px;
	background-color: blue;
	display: inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.box {
	width: 50px;
	height: 50px;
	background-color: green;
	margin: 2px;
}
<div class="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>
<div class="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

相反,它看起来像这样:

how it shall not be displayed

我的问题是,容器仅包含第一行,而不包含其他行-因此第二个容器位于错误的位置。该如何解决?

0 个答案:

没有答案