微信小程序自定义日历组件及flex布局最后一行对齐-创新互联

微信小程序自定义日历组件及flex布局最后一行对齐？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

十余年专注成都网站制作，企业网站制作，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于企业网站制作,高端网页制作,对假山制作等多个方面，拥有丰富的网站推广经验。

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

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

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

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

这样的话我就给每一行设置相同的class，让其再用flex规范子元素（子组件）：

  
  	日
  	一
  	二
  	三
  	四
  	五
  	六
  
  
   	 
   		
   			{{item.date}}
   		
   	
  

文章标题：微信小程序自定义日历组件及flex布局最后一行对齐-创新互联
链接地址：http://bzwzjz.com/article/ejsci.html