在列中时，弹性项之间没有更多空间

Question

为什么当我的flex项(.first、.second和third(包装成一列时没有剩余空间？在一排中，它们的间距均匀。

* {
box-sizing: border-box;
}
main {
display: flex;
justify-content: space-evenly;
flex-flow: wrap;
align-items: center;
}
img {
border: solid;
}
.first {
flex: 0;
}
.second {
flex: 0;
}
.third {
flex: 0;
}

<main>
<img class="first" src="images/tronche_webb_25.jpg" alt="tête de yann" />
<img class="second" src="images/tronche_webb_50.jpg" alt="tête de yann" />
<img class="third" src="images/tronche_webb_35.jpg" alt="tête de yann" />
</main>

对齐内容难道没有帮助吗？非常感谢。

Answer 1

您需要定义main的高度，以便获得合理的内容：均匀的工作空间。

试试这个。

* {
box-sizing: border-box;
}
main {
display: flex;
justify-content: space-evenly;
flex-flow: wrap;
align-items: center;
flex-direction: column;
height: 500px;
}
img {
border: solid;
}
.first {
flex: 0;
}
.second {
flex: 0;
}
.third {
flex: 0;
}

<main>
<img class="first" src="https://placehold.it/100x100/ccc/666?text=" alt="tête de yann" />
<img class="second" src="https://placehold.it/100x100/ccc/666?text=" alt="tête de yann" />
<img class="third" src="https://placehold.it/100x100/ccc/666?text=" alt="tête de yann" />
</main>