Question

当我的flex-items（.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

您需要为主体定义高度，以获取辩护内容：空间均匀工作。

尝试一下。

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

列中的弹性项目之间没有更多空间

1 个答案: