Больше нет места между flex-элементами в столбце

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

Вам нужно определить высоту для основного, чтобы получить justify-content: space-равномерно работать

Попробуйте это.

* {
    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>