2020-5-18-如何处理flex布局的最后一行元素宽度问题

黄腾霄

发布于 2020-06-10 15:30:30

2K0

发布于 2020-06-10 15:30:30

文章被收录于专栏：黄腾霄的博客黄腾霄的博客

今天来和大家聊一个有意思的flex布局问题。

注：源码可以参考我在codepen做的demoflex

问题来源

问题是这样的，我有一个list，期望做成一个flex的wrap布局。

每个item项有一个最小宽度，随着窗口的拉伸，item宽度会增加，并且占满容器空间。

当窗口宽度增加到一定程度，会触发wrap的布局，每一行会多排列一个item。

代码如下

<div class="app-list">
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
</div>

.app-list {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}


.app-block {
    cursor: pointer;
    background: #000;
    margin-right: 18px;
    margin-top: 18px;
    flex: ;
    min-width: 300px;
    height: 94px;
}

但是问题来了对于最后一行的item，显示情况就很糟糕了。

由于最后一行的元素更少，所以在就会占用更多的宽度，导致这些元素比其他列表的元素更宽。

解决方案

在查询了Stack Overflow的众多问题后，发现这个是一个通用问题，并没有特别完善的css解决方案。

不过在这个问题的答案给了我一些启发css - Flex: wrapped items with same width as the rest - Stack Overflow

利用空列表项进行辅助布局。

<div class="app-list">
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block"></div>
    <div class="app-block app-empty-item"></div>
    <div class="app-block app-empty-item"></div>
    <div class="app-block app-empty-item"></div>
</div>

.app-list {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}


.app-block {
    cursor: pointer;
    background: #000;
    margin-right: 18px;
    margin-top: 18px;
    flex: ;
    min-width: 300px;
    height: 94px;

    
}

/*注释下面代码可以出现问题*/
.app-block.app-empty-item{
        cursor: default;
        height: ;
        margin-top: ;
        margin-right: 18px;
}

这里我们额外添加了三个列表项，并且将其高度设置为0。

结果如下，我们看到即使最后一行没有填满也能成功布局，使每一项等宽。

我们看到这些额外的列表项实际也参与了flex布局，只是没有高度，所以在感官上不会影响。

处理生成列表

当然我们现在开发面对的大部分是生成列表，不会这样手写html

例如我们拿React来说，该怎么处理呢？

render() {
        return (
            <div className="app-list">
                {this.props.dataSource.map((item, index) => (
                    <div key={item.id} className="app-block"/>
                )).concat(new Array().fill().map((_, index) => (<div key={index} className="app-block app-empty-item"/> )))}
            </div>
        );
    }

如上所示，这里只要在数据源之后通过concat拼接上一个空的数据项即可。