flex布局自动换行并依次排列

本文将以实例的形式讲解 flex 布局自动换行并依次排列的方法。

看下面的实例：

.container {
    width: 360px;
    height: 300px;
    border: 1px solid #ddd;
    display: flex;
}

.item {
    width: 100px;
    height: 60px;
    margin: 8px;
    border: 1px solid blue;
}

虽然我们给每个 item 指定了 100px 宽度，但是每个 item 都没有达到 100px，全被挤扁了。我们可以给 item 指定样式 flex-shrink: 0，让每个 item 固定在 100px 宽度。

.item {
    ...
    flex-shrink: 0;
}

效果如下：

这时我们发现，新的问题又产生了，item 跑出 container 了，本文核心问题来了，如何让 flex 布局自动换行并依次排列呢？

答案很简单，给 container 添加 flex-wrap: wrap 属性即可。

.container {
    ...
    flex-wrap: wrap;
}

再来看，换行是满足了，2 行中间的间隙也太大了，如何消除 2 行之间的间隙呢？

这时候该 align-content: flex-start 出场了！

.container {
    ...
    align-content: flex-start;
}

好了，完美实现 flex 布局自动换行并依次排列问题。

本文地址：https://www.tides.cn/p_css-automatic-line-wrapping-and-sequential-arrangement-in-flex-layout