专栏首页黄腾霄的博客2020-5-18-如何处理flex布局的最后一行元素宽度问题

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

今天来和大家聊一个有意思的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拼接上一个空的数据项即可。

如何决定空列表项个数

由于最后一行列表的最少个数1个,所以同其他行差距为,单行铺满的个数-1 。

因此我们只要让空列表项个数为,窗口最大宽度能铺满的个数再-1就可以了。


参考文档:


本文会经常更新,请阅读原文: https://xinyuehtx.github.io/post/%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86flex%E5%B8%83%E5%B1%80%E7%9A%84%E6%9C%80%E5%90%8E%E4%B8%80%E8%A1%8C%E5%85%83%E7%B4%A0%E5%AE%BD%E5%BA%A6%E9%97%AE%E9%A2%98.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Moq基础(六)

    什么意思呢?如下图所示,你要验证公共方法A,A中做了T.B()和T.C()两件事。

    黄腾霄
  • 2020-5-7-规约模式(specification)

    假设你正在减肥,不能吃肉,也不能吃卡路里大于500的食物。把这种情况用编程来表示就会是下面这样

    黄腾霄
  • 2019-1-24-wcf入门(3)

    WCF的服务调用有3种模式:请求答复模式(Request-Repley),单向模式(One-Way),双工模式(Duplex)

    黄腾霄
  • BBS论坛(十九)

    zhang_derek
  • 你的第一个渐进式网站应用(4)

    任何项目都可以以多种方式开始,我们通常建议使用Web Starter Kit。但是,在这个案例中,为了让我们的项目尽可能简单,并专注于渐进式网站应用,我们为您提...

    RP道貌不岸然
  • Bootstrap的学习以及简单运用

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>柠檬学院</title> 5 <meta char...

    别先生
  • 常见的手写代码题集

    要求是 yield 后面只能是 Promise 或 Thunk 函数,详见 es6.ruanyifeng.com/#docs/gener…

    前端迷
  • python celery定时任务(并行编程 33)

    import celery app = celery.Celery('cele', broker='redis://localhost:6379') @ap...

    用户5760343
  • Thymeleaf使用笔记

    模板引擎是为了使用户界面与业务数据内容分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的文档。当项目里面配合后端框架spring bo...

    王小婷
  • 豫商杯web的WP

    http://ctf3.shiyanbar.com/web/variable/ 打开题目发现

    安恒网络空间安全讲武堂

扫码关注云+社区

领取腾讯云代金券