html - 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>

除非我给我的 flex-container 一个高度，否则这是行不通的，我不喜欢这个高度，因为这些年应该被平均分配。

标签： htmlcssflexboxmultiple-columnsresponsive

Answer 1

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