Flexbox：响应式列布局

Question

我不知道如何使用 flexbox。

我想要一个包含三列的布局，就像这样：

在移动设备上，我会自动切换到单列布局。

我怎样才能做到这一点？

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.flex-container>div {
    width: 33%;
}
@media(max-width: 768px) {
    .flex-container>div {
        width: 100%;
    }
}

<div class="flex-container">
    <div>
        <a>Year 1980</a>
    </div>
    <div>
        <a>Year 1981</a>
    </div>
    <div>
        <a>Year 1982</a>
    </div>
    <div>
        <a>Year 1983</a>
    </div>
    <div>
        <a>Year 1984</a>
    </div>
    <div>
        <a>Year 1985</a>
    </div>
    <div>
        <a>Year 1986</a>
    </div>
</div>

除非我给我的弹性容器一个高度，否则这是行不通的，我不喜欢这样，因为年份应该被平均分配。

Answer 1

从 CSS 中删除 flex-direction 并使用 text-align: center 然后你就可以开始了。