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

Question

当我的弹性项目（.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>

不是 align-content 假设有帮助吗？谢谢你。

标签： cssflexbox

Answer 1

您需要为 main 定义高度，以便让 justify-content: space-evenly 工作。

尝试这个。

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