微信小程序自定义日历组件和flex布局，如何实现最后一改写？

本文共计2872个文字，预计阅读时间需要12分钟。

最近开源的小项目：微信小程序扩展自定义组件库（点击去GitHub）+ 增加了一个新组件 —— 日历组件。效果演示：在编写过程中，因为大家都知道，日历组件是有固定行数和每一行的单元格数的。

最近为我开源的小项目：微信小程序扩展自定义组件库（点击去GitHub） 增加了一个新组件 —— 日历组件。
效果演示：

在编写过程中，因为大家都知道，日历组件是有固定行数和每一行的固定列数的（即使当前方块内没有值），所以结合小程序“数据优先”的特点，最合适的布局方式一定是flex了！

先说一下大致思路（布局上），笔者将整个组件分为两部分：分别是

1. 头部的当前日期（年月）显示，以及左右两侧的切换按钮
2. 当前切换月份的日期显示

头部的布局自不多说：一个 display:flex; 加上 align-items:center; 居中简直完美。
底部的日期显示我是采用的“将整体分为六行，每一行七列”的布局方式 —— 因为一个月最多31天，每一周最多7天，6X7=42，行数六行足够使用。