微信小程序自定义日历组件与flex布局最后一行对齐问题分析

欢迎点赞！

背景

最近，我的开源小项目中添加了一个新组件：微信小程序扩展自定义组件库（点击前往）——日历组件。

文本

在编写过程中，由于大家都知道日历组件的行数是固定的，每行的列数也是固定的（即使当前框中没有值），所以最合适的布局方式就是结合“小程序的“数据至上”的特点。一定要柔韧！

说一下总体思路（布局方面），作者将整个组件分为两部分：分别

头部显示当前日期（年月），左右两侧切换按钮

显示当前切换月份的日期

头部的布局就不多说了：一：flex；加上对齐项目：；并且居中是完美的。最下面的日期显示我采用了“将整体分为六行，每行七列”的布局方式——因为一个月最多有31天，一周最多有7天，6X7=42，六行就足够了。（现在基本上日历有6行7列）

在这种情况下，我将为每一行设置相同的类，并让它使用flex来标准化子元素（子组件）：

<view class="calendar_panel calendar_panel_two">
    <view class="calendar_box">
     <view class="weekday_label">日</view>
     <view class="weekday_label">一</view>
     <view class="weekday_label">二</view>
     <view class="weekday_label">三</view>
     <view class="weekday_label">四</view>
     <view class="weekday_label">五</view>
     <view class="weekday_label">六</view>
    </view>
    <view class="calendar_box" wx:for="{{dateList}}" wx:for-item="week" style="{{index==0?'justify-content:flex-end':''}}">
       <view class="weekday_label {{(item.value==selectedDate)?'active_date':''}} {{(item.value==now_selectedDate)?'active_dates':''}}" wx:for="{{week}}">
        <view class="" bindtap="selectDate" data-date="{{item}}">
         {{item.date}}
        </view>
       </view>
    </view>
</view>

（代码中从下数第七行和第八行的判断是检查是当前日期（）还是选中日期（），并为其添加特效，不会影响布局）

.calendar_panel{
    width: 100%;
    height: calc(100% - 56rpx);
}
.calendar_panel_two{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.calendar_box{
    width: 100%;
    background: #fff;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    height: calc(100% / 6);
    align-items: center;
}
.weekday_label{
    font-size: 27rpx;
    padding: 12rpx 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.weekday_label>view{
    box-sizing: border-box;
    padding: 20%;
}
.select_icon{
    width: 30rpx;
    height: 30rpx;
}
.active_date{
    background: rgba(0,0,0,.12);
    color: rgba(0,0,0,.6);
    overflow: hidden;
    position: relative;
}
.active_dates{
    background: rgba(0,0,0,.1);
    color: rgba(0,0,0,.5);
    position: relative;
}
.active_dates::before{
    content: "今天";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: blue;
    font-size: 20rpx;
}

布局完成。我高兴地按下ctrl+s，发现：

flex布局_布局float_弹性盒子布局flex

可以看到，控制每一行的类都是“”，所以毫无疑问，出现如图所示的原因一定是这个类中有这么一行代码：

justify-content: space-around;

正如预期的那样！

在这个项目中，我的解决方案很简单：删除这行代码。如何解决由此产生的宽度和高度问题？ CSS为这个问题提供了一个解决方案——calc()！我将“每行”的高度设置为外部视图的 1/6::calc(100% / 6)，并将每行中的列的宽度设置为整个行宽度的 1/7： width:calc( 100% / 7 )根据CSS文档流的特点，这些元素会依次排列，非常漂亮~（去这里）

★

随着 calc 等 css3 函数的“加入”，可以预见，这种纯粹的“原生”解决方案将越来越多地应用于各种场景。

”

弹性盒子布局flex_flex布局_布局float

如前所述，这种情况下的行数和列数是固定的 – 这并不罕见！那么，除了本文提出的解决方案之外，还可以做些什么呢？

动态改变最后一个元素的宽度

我们都知道flex布局中另一个众所周知的概念是flex: 1; (flex: auto;)，可以动态“填充”剩余空间。然后我们在子元素同级添加另一个元素，设置它的最小宽度与子元素宽度相同，并与子元素一致：

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i class="lists"></i>
</div>

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width:100px;
    height:100px;
    background-color: skyblue;
    margin: 10px;
}
i.lists{
   min-width:100px;
   margin: 10px;
}

这个方法和下题的第一种方法类似，但是简单多了！

基于数字最后一个元素的动态

简单来说：单独设置最后一行的最后一个元素，并控制其-right。由于每列的数量是固定的，我们可以计算出不同的数字列表应该取什么值，以确保完全左对齐。例如，假设每行有4个元素，而最后一行只有3个元素，那么如果最后一个元素的-right大小为“列表宽度+间隙大小”，那么最后3个元素也可以完美保留-对齐。然后，借助树结构伪类数量匹配技术，我们就可以知道最后一行有多少个元素。例如：

.list:last-child:nth-child(4n – 1) 表示最后一行有 3 个元素或 7 个元素…

.list:last-child:nth-child(4n – 2) 表示最后一行有 2 个元素或 6 个元素…

.container {
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3个元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

那么，如果每行的列数不固定怎么办？

解决这个问题的方法有很多，其中笔者最“推荐”的就是使用空白元素来占据空间！使用足够的空白标签来填充占位符：占位符的具体数量由最大列数决定。比如这个布局最多有7列，那么我们可以用7个空白标签来填充占位符，最多10列。那么我们需要使用10个空白标签。

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i></i><i></i><i></i><i></i><i></i>
</div>

这种方法的缺点（也是优点）是占位符元素的宽度和设置必须与列表的父元素相同！

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: -10px;
}
.container .list {
    width: 100px; 
    height:100px;
    background-color: skyblue;
    margin: 15px 10px 0 0;
}
/* 和列表一样的宽度和margin值 */
.container > i {
    width: 100px;
    margin-right: 10px;
}

如果你想在这里左对齐，设置i的-right；同样，如果要右对齐，请设置-left。

目前被很多人接受的另一种方法是曾经流行的网格布局——它具有自然的单边对齐和方形间隙。对于熟悉grid的人来说，本文中的这个问题几乎不会出现：

/** html代码 */
<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

/** CSS代码 */
.container {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 10px;
}
.list {
    width: 100px; 
    height:100px;
    background-color: skyblue;
    margin-top: 5px;
}