最近(jìn)為(wèi)我開(kāi)源的(de)小(xiǎo)項β ​γ目：微(wēi)信小(xiǎo)程序擴展<&'自(zì)定義組件(jiàn)庫（點擊去(qù)Gi₩≠¥tHub） 增加了(le)一(yī)個(gè)$‍< 新組件(jiàn) —— 日(rì)曆組件(jiàn)。≥‌

在編寫過程中，因為(wèi)大(dà)家(jiā)都(dōu)知(zhī)道(₹≈✘ dào)，日(rì)曆組件(jiàn)✘✔÷₽是(shì)有(yǒu)固定行(xíng)數(shù)和(hé)每一(yī)行(xíngσ₹♦)的(de)固定列數(shù)的(de)（即↕↑©使當前方塊內(nèi)沒有(yǒu)值）࿰ ≠₽c;所以結合小(xiǎo)程序“數(shù)據優先”的(de)§σ特點，最合适的(de)布局方式一(yī)定是(shì)fle♣✔ ‍x了(le)！

先說(shuō)一(yī)下(xià)大(dà)緻思路($÷≤→lù)（布局上(shàng)），筆(bǐ)者将整個 Ω×↑(gè)組件(jiàn)分(fēn)為(wèi)兩部分(fēnβφ↔ε)：分(fēn)别是(shì)

1. 頭部的(de)當前日(rì)期（年(nián)月(yuè)）顯示&#x₽σff0c;以及左右兩側的(de)切換按鈕
2. 當前切換月(yuè)份的(de)日(rì)期顯示

頭部的(de)布局自(zì)不(bù)多(duō)說(shuō)：一(y♥↕ī)個(gè) display:flex; 加上(shàng) align-items:center; 居中簡直完美(měi)。
底部的(de)日(rì)期顯示我是(shì)采用(y£¶∑↕òng)的(de)“将整體(tǐ)分(fēn)為(wèi)六行(xíng)&#​∑εxff0c;每一(yī)行(xíng)七列”的(de)布局方式 —— 因為φε✔‌(wèi)一(yī)個(gè)月(yuè)最多(duō)$‌α&31天，每一(yī)周最多(duō)7天，6X7λ∏✘=42，行(xíng)數(shù​✘≥)六行(xíng)足夠使用(yòng)。（而且現(xiàn)在基本上(sh"≠≈ àng)日(rì)曆都(dōu)是(shì)6行(xíng)7列的(de)）δ¶​

這(zhè)樣的(de)話(huà)我就(jiù)給π  每一(yī)行(xíng)設置相(xiàng)同的(de)class，讓其再≈σλ用(yòng)flex規範子(zǐ)元素（子↔φ(zǐ)組件(jiàn)）：

<view class="calendar_panel calendar_panel_two">
    <view class="calendar_box">
    	<view class="weekday_label">日(rì)</view>
    	<view class="weekday_label">一(yī)</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 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;
}

布局方完成，我滿心歡喜的(de)按下(xià)ctrl+sδπ ，發現(xiàn)：

可(kě)以看(kàn)到(dào)：控制(zhì)每一(yī♣™‍​)行(xíng)的(de)類是(shì) “calendar_box”，那(nà)∏↓λ♣麽毫無疑問(wèn)，導緻出現(xiàn)如(rú)圖原因肯定是(shìσ←φφ)此類中有(yǒu)這(zhè)樣一(yī)行(xíng)代碼：

justify-content: space-around;

果不(bù)其然！

---

在本項目中，我的(de)解決方法很(hěn)簡單&#xφ× ®ff1a;将這(zhè)一(yī)行(xíng)代碼去(qù)掉ÿ£₽0c;那(nà)麽由此導緻的(de)寬高(gāo)問(wδ• ≥èn)題怎麽解決？
這(zhè)個(gè)問(wèn)題，c↔>®ss給出了(le)解決方案—— calc() ！
我将“每一(yī)行(xíng)”的(de)高(gā★"÷"o)度設為(wèi)外(wài)部view的(de)1/6： ε;height:calc(100% / 6) （因為(wèi)這(zhè)是(shì)個(gè)組件(ji÷•γ∏àn)，要(yào)用(yòng)到(dào)其他(☆Ω↓←tā)地(dì)方，外(wài)部元素寬高(gā→∞λ↕o)不(bù)一(yī)定，所以要(yào)用(<☆ yòng)百分(fēn)比），每一(yī)♦★¥行(xíng)中列的(de)寬度設為(wèi)整行(xíng)寬度的(de)1/7≥₩↓：width:calc(100% / 7)
根據CSS文(wén)檔流的(de)特點，這(zhè)≠$些(xiē)元素在一(yī)行(xíng)中就(jiù)會(huì)一(yī®→¶")個(gè)接一(yī)個(gè)的(de)排列，賊↕×★÷好(hǎo)看(kàn)的(de)那(nà)種~（去(qù)這¶₩∏(zhè)裡(lǐ)）

答(dá)疑：
文(wén)章(zhāng)發出後有(yǒu)人(rén)留言問(wèn)“為(w↔♣'​èi)啥不(bù)全部設置calc(100% / 6)然後用(yò♠®ng)flex換行(xíng)？”，≤$emmmmmmm沒這(zhè)個(gè)必要(yào)吧(ba)&#÷★$>xff0c;這(zhè)不(bù)是(shì)看(kàn)個(gè)¶ 人(rén)喜好(hǎo)嗎(ma)，嘿嘿。先不(bù)說(shuō)這(zhè ♦Ω≈)裡(lǐ)我是(shì)采用(yòng)的(de)“周幾和(hé)日(rì)期父元✔♥Ω∏素同一(yī)個(gè)class，在裡(lǐ)面隻控制(zhì)和(hé)‘>¥φλ整行(xíng)’相(xiàng)關的(de)屬性值”的(de)策略&₽•₩§#xff1b;其實這(zhè)裡(lǐ)也(yě)是(shìα≈​±)一(yī)個(gè)語義化(huà)：一(yī)周有(yǒu)七個(g∏÷"è)日(rì)期，那(nà)一(yī)行(xíng)就¥₩(jiù)放(fàng)七個(gè)元素，之間(jiān)¥₹≥互不(bù)影(yǐng)響 —— 你(nǐ)如(rú)果去(qù)Giφ÷✔♥tHub看(kàn)源碼的(de)話(huà)就(jiù)會(Ω±λhuì)發現(xiàn)：在JS渲染日(rì)期時(shí)我就(jiù>π<)有(yǒu)意将每一(yī)行(xíng)之間(jiān)（也(yě)就(↓×jiù)是(shì)每一(yī)周）“隔離(lí&₩♠)操作(zuò)、單獨渲染”。

當然，你(nǐ)也(yě)可(kě)以如(rú)代₩♠$碼中判斷index==0（Ω↕₩&;第一(yī)行(xíng)）一(yī)樣去(q‌ •ù)判斷：

style="{{index==5?'justi>≥₹↑fy-content:flex-start':'♠‌♥λ;'}}"

不(bù)過就(jiù)顯得(de)有(yǒu)點“多(duō)此一(yī)αβ舉”了(le)。

有(yǒu)了(le)calc等css3函數(shù)的(de)“加盟”，可(kěα☆)以預見(jiàn)這(zhè)種純‘原生(shēng)’的(de)解決方₽<∑式将會(huì)越來(lái)越多(duō)的(de)被使用(yòng)到(d '♣ào)各種場(chǎng)景。

剛才說(shuō)了(le)，這(zhè)個(gè)案例中的(de)行(β ♣xíng)列數(shù)是(shì)固定的(de) ©₩—— 這(zhè)并不(bù)少(shǎo)見(jiàn)！那(nà)麽&#xβ←∑ff0c;除了(le)本文(wén)提出的(de)解決方法，還(hái∏≠<)能(néng)怎麽做(zuò)？

動态改變最後一(yī)個(gè)元素的(de)寬度

我們都(dōu)知(zhī)道(dào)，flex布局中還(hái)有(yǒu)一(≠α®yī)個(gè)比較著名的(de)概念就(jiù)是(shì) flex: 1; （flex: auto;）了(le)，他(tā)能(néng)動态“填滿”剩餘空<☆(kōng)間(jiān)，那(nà)麽我們再子(zǐ)元素同級位置再加×≈ε™一(yī)個(gè)元素，對(duì)他(tā)設置最小(xiǎo)寬度為(wèi)子(zǐ)元素相(xiàng)同寬度，并♣↑且margin和(hé)子(zǐ)元素一(yī)緻：

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div classδ  ≤="list"></div>
    <div cl'¶$ass="list"></div>
    <div class="list"></div>
    <dβ✘iv 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: 0 10px;
}

這(zhè)個(gè)方法和(hé)下(xià)一(yī)個(gè)問(®•‍"wèn)題的(de)第一(yī)種方法類似，但(dàn)☆<$ 要(yào)簡單很(hěn)多(duō)！

警告！
經過有(yǒu)讀(dú)者留言提醒，這(zhè)種方法确實不(₩↕¥bù)準确（感謝(xiè)@李奕威（微(wēα≈♠≥i)信用(yòng)戶）），當時(shí)筆(¥≥bǐ)者測試的(de)時(shí)候沒有(yǒu)考慮到(dàoε₩↕₩)所有(yǒu)情況而且測試用(yòng)class為(wèi)list的(de)div¥≈♦的(de)個(gè)數(shù)有(yǒu)些(xiē)取巧造成了(le)這(‍®αzhè)一(yī)現(xiàn)象。後經過多(duō)次測試發現(x® →₹iàn)：這(zhè)種方法受min-width的(de)影(yǐng)響Ω↕在一(yī)些(xiē)特殊情況下(xià)可(kě)行(xíng)（比•↓≤如(rú)：list個(gè)數(shù)為(wèi)7且一(yī)行(xíng)¥↔最多(duō)四個(gè)（每行(xíng)列數(sΩ ≈hù)可(kě)小(xiǎo)于4）時(shí)是(shì)可(kě)以的> (de)，但(dàn)這(zhè)種規律不(bù)是(©±shì)絕對(duì)的(de)） —— 如(rú)果不 δ(bù)是(shì)flex，它将會(☆✔huì)呈現(xiàn)和(hé)為(wèi)最後一(yī)個(gè)元素添加“margin-ri≥♦↓ght:auto”一(yī)樣的(de)效果！
所以，建議(yì)跳(tiào)過這(zhè)♥"∞​種方法，我會(huì)再探索其相(xiàng)關實踐應用(yòng¶≠π←)。

根據個(gè)數(shù)最後一(yī)個(gè)元素動态margin

簡單來(lái)說(shuō)就(jiù)是(shì)：★Ω∏;單獨設置最後一(yī)行(xíng)的(de)最後一(yī)個(☆÷gè)元素，控制(zhì)其margin-right
由于每一(yī)列的(de)數(shù)目都(dōu)是(shì)固定的(de)，±π¥&;因此，我們可(kě)以計(jì)算(suàn)出不Ω₩(bù)同個(gè)數(shù)列表應當多(duō)大(dà)的(de)margin值才能(nén ‍×g)保證完全左對(duì)齊。
例如(rú)，假設每行(xíng)4個(gè)元素，結果最後一'α♣(yī)行(xíng)隻有(yǒu)3個(gè)元素，則最×≥₩後一(yī)個(gè)元素的(de)margin-right大(dà)小(xiǎ₩£€ o)是(shì)“列表寬度+間(jiān)隙大(dà)¶↑小(xiǎo)”的(de)話(huà)，那(nà)最後3個(gè)元素也(y÷§¶←ě)是(shì)可(kě)以完美(měi)左對(duì)齊的(de)。
然後，借助樹(shù)結構僞類數(shù&¥→)量匹配技(jì)術(shù)，我們可(kě)以知(zh÷÷Ωδī)道(dào)最後一(yī)行(xíng)有(yǒu)幾個(gè)元素。
例如(rú)：

1. .list:last-child:nth-child(4n - ​♠₹↑1)說(shuō)明(míng)最後一(yī)行(xíng)，要(yào)麽'δ©3個(gè)元素，要(yào)麽7個(gè)元素……
2. .list:last-child:nth-child(4n♦<®☆ - 2)說(shuō)明(míng)最後一(yī)行(xíng)࿰↕∏♦c;要(yào)麽2個(gè)元素，要(yào)麽6個(gè)&‍元素……

.container {
    display: flex;
    /* 兩端對(duì)齊 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如(rú)果最後一(yī)行(xíng)是(shì)3個←∑×(gè)元素 */
.list:last-child:nth-child(4n∏¶< - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如(rú)果最後一(yī)行(xíng)是(shì)2個(gè)元素 ‍♦✘*/
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

---

那(nà)麽，如(rú)果每一(yī)行(xíng)的(de)列數(shù)™→是(shì)不(bù)固定的(de)呢(ne)？

這(zhè)個(gè)問(wèn)題的(de)解法有(yǒu)很(hěn)多(duō)種 ✔£"，其中筆(bǐ)者最“推崇”的(de)是(shì)——用(yòng)空( Ωkōng)白(bái)元素占位！
使用(yòng)足夠的(de)空(kōng)白(bái)标簽進行(α✘xíng)填充占位：具體(tǐ)的(de)占位數(s∑γ‌hù)量是(shì)由最多(duō)列數(shù)的(de)個(gè)數(shù)決εφ♠ε定的(de)，例如(rú)這(zhè)個(gè)布局最多(duō)7列&#x$✔÷∑ff0c;那(nà)我們可(kě)以使用(yòng)7個(gè)γα'空(kōng)白(bái)标簽進行(xíng)填充占位&↓™α#xff0c;最多(duō)10列，那(nà)我們需要(≥€≈yào)使用(yòng)10個(gè)空(kōng)白♥ ≠(bái)标簽。

<div class="container">
    <div class="list"></div>
    <div class← σλ="list"></div>
    <di↓♣v class="list"></div>
    <div class'¶1;"list"></div>
    <div cla←‍ss="list"></div>
    <div class♦•☆="list"></div>
    <div class="list"></div>
    <i>₩‌★'</i><i></i>‍φ®<i></i><i><δ±€¶/i><i></i>
</dγ>iv>

這(zhè)種方法的(de)缺點（同時(shí)也(₹×↕yě)是(shì)優點）就(jiù)是(shì)®₽<≠f1a;占位的(de) <i> 元素寬度和(hé)margin設置必須和(hé)列表父元素Ω'÷®一(yī)樣即可(kě)！

.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;
}
/* 和(hé)列表一(yī)樣的(de)寬度和(hé)margin值 */
.container > i {
    width: 100px;
    margin-right: 10px;
}

這(zhè)裡(lǐ)要(yào)左對(duì)齊，則設置i的(de)margin"₹‍-right；同樣的(de)如(rú)果右對≤₩(duì)齊，則需設置margin-left。

還(hái)有(yǒu)一(yī)種目前被很(hěn)多(duō)人(r ≠én)接受的(de)方法就(jiù)是(shì)曾經風(fēng)靡的(de)grid布局 —— 它有(yǒu)天然的(de)單側對(duì)其和(hé)方塊間Ωγ&(jiān)隙，對(duì)熟悉grid的(de)人(rén)來(lái→✔≤)說(shuō)，本文(wén)這(zhè)個(gè)問(wèn)題幾乎不(bδ​¥<ù)會(huì)出現(xiàn)：

/** 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;
}

答(dá)疑：
我看(kàn)到(dào)文(wén)章(zhāng)發出後有(y  ©ǒu)人(rén)留言問(wèn)“如(rú)果像這(zhè)種模±>®♠塊分(fēn)布，但(dàn)列數(shù)不(bù)固定&≥且是(shì)根據可(kě)視(shì)化(huà)窗(chuāng)口變化(huà)決定一(×÷©yī)列放(fàng)多(duō)少(shǎo)個(<‍gè)，但(dàn)是(shì)要(yà​πo)每個(gè)方塊的(de)間(jiān)距都(dō Ωu)是(shì)一(yī)樣的(de)”？π♦©≈;這(zhè)種問(wèn)題其實很(hěn)簡單&#>•xff1a;上(shàng)面這(zhè)個(gè)用(yòng)grid布局的<β(de)代碼如(rú)果将 justify-content: space-between; 換為(wèi) justify-content: space-around; 就(jiù)可(kě)以了(le)。。。（雖然也(yě)會(huì)有™σ(yǒu)間(jiān)距變化(huà)，→★但(dàn)是(shì)在可(kě)接受範圍，'♠¥&;‘空(kōng)白(bái)’不(bù)會(huì)顯得(de)突兀）
現(xiàn)在的(de)問(wèn)題是(shì)因為¥ ≥(wèi)“space-between”是(shì)按照(zhào)“最兩側的(de)貼近₩​"✔(jìn)父容器(qì)邊緣”的(de)方法排版的(de)，也(yě​£♠≥)就(jiù)是(shì)說(shuō)類似“兩邊的(de)兩個(gè)貼著(zhe)邊&#¥♠β​xff0c;剩下(xià)的(de)幾個(gè)瓜分(fēn)中間(jiān)的(de)空£ €™(kōng)間(jiān)，每往裡(lǐ)σ→一(yī)層還(hái)是(shì)按這(zhè)樣的(de)方¥✔≤₽式”，也(yě)就(jiù)造成了(le)響應式變化(huà)★Ωε 時(shí)由于一(yī)行(xíng)內(nèi)個(gè)數(shù↑π♥≥)變化(huà)中間(jiān)會(huì)有(yǒu)↓♠₹一(yī)大(dà)片空(kōng)白(bái)的(de÷•→)效果。

---

最後再介紹一(yī)下(xià)這(zhè)個(gè)組件(ji♣>àn)：它在調用(yòng)時(shí€<')接收兩個(gè)參數(shù)——他(tā)們是( ≤>shì)兩個(gè)event函數(shù)，你(nǐ)需要(yào)監聽(t∑$→īng)他(tā)們，你(nǐ)可(kě)以得(de)到(dào§∏♦)：剛顯示組件(jiàn)時(shí)的(de¥∞ ¥)當前日(rì)期/星期幾和(hé)你(nǐ)點擊選中★‌日(rì)期時(shí)選中的(de)年(nián)月(yuè)日(rì)和(hπ ₽¶é)星期幾

2020-09-28更新
你(nǐ)可(kě)以在調用(yòng)組件(jiàn)時(shí)傳入一(yī)個(gè)數↔±™(shù)組參數(shù) dateTimes ，它的(de)作(zuò)用(y→♣¶òng)：标記哪一(yī)天的(de)事(shì)件(jiàn)&™。它的(de)格式如(rú)：

他(tā)将顯示如(rú)下(xià)：

結尾：

以後可(kě)能(néng)為(wèi)組件(jiànλπ)增加什(shén)麽功能(néng)就(jiù)把布局方式更新了(le)࿰ ‍ ₽c;到(dào)時(shí)候再回來(lái)補。

臨近(jìn)國(guó)慶學校(xiào)沒啥課，電(diàn)腦(✘÷ nǎo)放(fàng)工(gōng)作(zuò)室沒帶回，室友(yǒu)'€電(diàn)腦(nǎo)有(yǒu)點不(bù)會(huì)用(yòng)࿰×<←₹c;就(jiù)到(dào)這(zhè)吧(ba)。中秋&國(guó)慶快(kuài)σ‌≈•樂(yuè)，嘿嘿！