Question

我最近开始使用flexbox而且我非常喜欢它，但是当我使用flex-grow时，我在flex-grow方面遇到了一些问题。

所以我创造了这个：

＆＃13;

section#vertical {
	display: flex;
	width: 90%;
	height: 120px;
	margin: auto;
	flex-direction: column;
	flex-wrap: wrap;
	background-color: cadetblue;
}

.box {
	background-color: salmon;
	flex: 1;
}

.big {
	background-color: turquoise;
	flex-grow: 2;
}

＆＃13;

<section id="vertical">
	<div class="box">s</div>
	<div class="box big">b</div>
	<div class="box">s</div>
	<div class="box">s</div>
	<div class="box">s</div>
	<div class="box big">b</div>
	<div class="box">s</div>
	<div class="box">s</div>
	<div class="box big">b</div>
	<div class="box">s</div>
	<div class="box">s</div>
	<div class="box">s</div>
	<div class="box big">b</div>
	<div class="box">s</div>
	<div class="box">s</div>
	<div class="box">s</div>
</section>

＆＃13;

你可以看到它有一些奇怪的行为，它会略微增加高度。也许是因为我的部分的高度？我不知道，有没有办法让一行（列）中有max5个盒子，而不是在我的部分放置一个高度？

flex-grow：2我的柱子高度不加倍

0 个答案: