超赞的grid+flex布局

实践证明,grid布局虽好,但是微信客户端支持还不够,不仅会导致布局出问题,还会导致所有class全部失效,最重要的是花了我一天时间找自己的问题。。。最后发现是微信自己的问题。

依旧推荐grid布局,因为错误是微信那边支持度较差造成的,之前的效果图是开发者工具里边显示的,是正常的,但是到手机上预览就出问题了。


 

现在只剩我和另一位同学,来完成成信大助手微信小程序的开发,而我负责前端。一个人更好,方便大展拳脚。

今天我在准备做课表页面的时候偶然想起了grid网格布局,然后先在网上看了看grid的基本概念,推荐阮一峰老师才写没多久的grid网格布局

直接上效果。

就这么点代码,我就搞定了整个课表的结构,接下来再上个色就可以用了。而且针对不同的课表信息,内容会自动排版,无需进行任何其他更改,妙就妙在grid的grid-column或grid-row属性上边,这两个属性分别指定当前元素在容器内的纵向与横向位置。真是个好东西。

和之前我没加入的时候后端自己写的前端代码对比下来,简洁了不知道多少倍~ 感受下~

发表评论

电子邮件地址不会被公开。 必填项已用*标注