我寫小程式像菜虛鯤——3、你能17張牌把我秒殺，我當場把電腦螢幕吃掉

coder-pig發表於2019-07-04

標題和內容無關，只是前幾天看盧姥爺的鬼畜：www.bilibili.com/video/av126…，順帶消費下，上柱香~

看上一節《我寫小程式像菜虛鯤——2、雞你太美》的人比預想中少很多哇…

可能是我不夠騷了(或者發的時間不對)，不過還是建議閱讀下「逆向微信小程式」那部分內容。本節來肝下「微信小程式中佈局」相關姿勢點。希望你學完本章後，可以：根據設計屍給的設計稿，堆砌控制元件。本節內容較多，建議點贊收藏以後有時間再看，畢竟 收藏了≈我會了，本文姿勢點安排如下：

  • 1、物理畫素，裝置獨立畫素，DPR，微信小程式特有尺寸rpx，設計稿尺寸；
  • 2、WXSS樣式匯入的幾種方式；
  • 3、如何通過選擇器定位到元素；
  • 4、文件流與脫離文件流；
  • 5、塊級元素與行內元素，通過display屬性轉換；
  • 6、盒子模型，box-sizing，外邊距合併問題；
  • 7、定位：相對定位，絕對定位，固定定位；
  • 8、浮動與清除浮動；
  • 9、多列布局multi-column，實現多列文字與簡單圖片瀑布流；
  • 10、flex彈性佈局；
  • 11、佈局實戰：仿寫每日優鮮首頁。

0x1、微信小程式特有單位——rpx

px（pixel）畫素，相信大家都不陌生吧，但是有三個名詞要說下：

  • ① 「物理畫素」：裝置螢幕實際擁有的畫素點，比如iPhone 6的解析度為750*1334，代表水平方向有750個畫素點，豎直方向有1334個畫素點。
  • ②「裝置獨立畫素」：可理解為反映在CSS/JS程式碼裡畫素點數。
  • ③「裝置畫素比(DPR)」：一個裝置的物理畫素與邏輯畫素的比。

看到這裡，讀者可能會有疑問：為何畫素還要分兩種，有區別嗎？

答：很久以前是沒區別的，在CSS裡寫1px，螢幕就渲染一個物理畫素，即DPR=1。隨著蘋果Retina技術的出現，這種局面被打破，使用Retina技術可以使用多個物理畫素來渲染一個邏輯畫素，螢幕尺寸沒變，解析度變高了，而人的視網膜無法分辨出螢幕上的畫素點，這也是感覺Retina屏卻比非Retina屏細膩的原因。

在Retina屏上DPR不再是1，而是大於1，比如iPhone 6的DPR=2，物理畫素是：750x1334，對應的邏輯畫素: (750x1334)/2 = 375x667。

名詞科普到這裡，接著說回rpx（responsive pixel），微信小程式特有尺寸單位，可以根據「螢幕寬度進行自適應」，規定：小程式螢幕寬度為750rpx。可以簡單地理解為：

把頁面按比例分割為750份，而每一份的大小是1rpx。

然後iPhone 6的物理畫素剛好為750*1334，所以在iPhone 6中：

1rpx = 1個物理畫素(1px)

所以，如果設計屍以 iPhone 6 為標準畫設計稿的話，標註是多少px，小程式就直接多少rpx，不用換算，而且還不用擔心在各個平臺上的適配情況，臥槽，美滋滋啊！！！最後總結下結論，不難得出這樣的等式：

在iPhone 6中：1rpx = 0.5px邏輯畫素 = 1物理畫素

0x2、WXSS樣式匯入

關於CSS樣式上節課就談了，微信小程式中的WXSS稍微有點不一樣。除了在目錄下建立同名的.wxss檔案會自動引用外。還可以使用@import語句 匯入外部樣式，相對路徑，示例如下：

/* app.wxss */
@import './wxss/base.wxss';
複製程式碼

除此之外，可以使用 style屬性 設定內聯樣式，一般是接收 動態樣式 用，而把 靜態樣式 統一寫到class中，示例如下：

<view style="color:{{color}};" />
複製程式碼

0x3、選擇器定位元素

為元素設定樣式，那你也得先定位到元素是吧！有如下三類最基礎的選擇器：

  • 「標籤選擇器」：文件中 所有的特定標籤 使用同一個CSS樣式。
  • 「id選擇器」：元素以 id屬性 來設定id選擇器，選擇器以「#」來定義。
  • 「類選擇器」：元素以 class屬性 來設定類選擇器，可以在多個元素中使用，以「.」號顯示。

接著是具體定位到元素的各種操作示例：

/* 標籤選擇器*/
p{color: red;}

/* id選擇器 */
#id-choose {color: green;}

/* class選擇器 */
.class-choose {color: blue;}

/* 對選擇器進行分組，共享同一個樣式，逗號隔開 */
text, button, checkbox { color: green; }
.text-1, .text-2 { color: gold }

/* x元素內所有的y元素，選擇作為x元素後代的y元素，稱後代選擇器或包含選擇器 */
view text{ color: purple }
/* 還可使用*萬用字元選擇所有元素 */
view *{ color: purple }

/* 父元素為x元素中的所有y元素，又稱：子元素選擇器 */
view > text{ color: red }

/* x元素後的所有y元素，又稱：相鄰兄弟選擇器 */
view + text{ color: red }

/* 選擇前面有x元素的每個y元素 */
view ~ text{ color: red }

/* 還可以通過屬性來定位元素 */
<view aria-role="button" aria-label="submit-label">提交</view>
[aria-role]{ color: purple }   /* 帶有某屬性 */
[aria-role="button"]{ color: purple }   /* 帶某屬性且等於xxx */
[aria-label~="label"]{color: purple}    /* 帶某屬性且包含XXX單詞 */
[aria-label|="submit"]{color: purple}   /* 帶某屬性且XXX單詞開頭 */
[aria-label^="su"]{color: purple}   /* 帶某屬性且xx開頭，不需要單詞 */
[aria-label$="el"]{color: purple}   /* 帶某屬性且xx結尾，不需要單詞 */
[aria-label*="el"]{color: purple}   /* 帶某屬性且包含xxx */
/* 還可以搭配元素選擇器玩耍 */
view[aria-role]{ color: purple }

/* 偽類，根據順序定位 */
.content-1 text:first-child{ color: pink }  /* 父元素首個x元素 */
.content-1 text:last-child{ color: pink }  /* 父元素最後一個x元素 */
.content-1 text:nth-child(n){ color: pink }  /* 父元素第n個x元素 */
.content-1 text:nth-last-child(n){ color: pink }  /* 父元素倒數第n個x元素 */

/* 偽元素 */
<view class="content">中間元素</view>
/* 元素前新增內容 */
.content:before{
  content: "插在前面的文字";
  color: red;
}
/* 元素後新增內容 */
.content:after {
  content:url("http://codingboy.xyz/avator.png");
}
複製程式碼

注意一點！！！

wxss無法獲取本地圖片資源，可使用 網路圖片，base64後的圖片 或 image標籤！

再注意一點！！！

class屬性值多個空格分隔，比如:<view class="font small blue">，其實就是指定多個class。這樣寫是為了CSS模組化設計，減少CSS重複程式碼，提高複用性。比如小程式中文字有幾種，樣式是基本一樣的，可能只是字型大小或顏色不同，你就可以這樣玩，程式碼示例如下：

<!-- wxml -->
<view class="font">
<view class="font small">
<view class="font small blue">

<!-- wxss -->
.font{ text-align: center; }
.font.small{ text-size: 18rpx; } /* 小號字型 */
.font.big{ text-size: 24rpx; }  /* 大號字型 */
.font.small.blue{ text-color: blue; }    /* 藍色小號字型 */

<!-- 寫了多個，如果有重複屬性定義，那麼後面的會覆蓋前面的！ -->
複製程式碼

關於選擇器更多內容可移步至：www.w3school.com.cn/cssref/css_…

0x4、文件流

文件內元素的流動方向，內聯元素從左往右，塊級元素從上往下。

簡單點說：元素在頁面出現的先後順序。

可能有些模糊，舉個例子：

<view style="background-color: #FFBBFF; height: 96rpx; line-height: 96rpx; text-align:center">塊元素①</view>
<text style="background-color: #CAFF70; ">行內元素①</text>
<text style="background-color: #EED8AE; ">行內元素②</text>
<text style="background-color: #FFA500; ">行內元素③</text>
<view style="background-color: #F08080; height: 96rpx; line-height: 96rpx; text-align:center">塊元素②</view>
<view style="background-color: #EEEE00; height: 96rpx; line-height: 96rpx; text-align:center">塊元素③</view>
複製程式碼

執行結果如下：

按照：內聯元素從左往右，塊級元素從上往下(獨佔一行)，這樣的規則就是「正常文件流」，如果我們通過一些手段，使得元素不按照這個規則進行排布，就叫「脫離文件流」。比如為行內元素②設定一個向右的浮動：

<text style="background-color: #EED8AE; float:right">行內元素②</text>
複製程式碼

就變成了這樣：

行內元素②沒有跟在①後，而③也沒有跟在②後，這就是 脫離文件流。

0x5、塊級元素(block)與行內(inline)元素

塊級元素：

  • 獨佔一行，且寬度會佔滿父元素寬度，即容器的100%；
  • 可設定width和height，不過即使設定了width還是會獨佔一行；
  • 可設定margin和padding；
  • 可容納內聯元素和其他塊元素；
  • 比如：<view>標籤

行內(內聯)元素：

  • 不獨佔一行，相鄰行內元素可以排在同一行；
  • 寬高為文字或圖片的寬高，不可變，即設定width/height無效；
  • 設定margin和padding 水平方向有效，垂直方向無效；
  • 只能容納文字或者其他內聯元素；
  • 比如：<text>標籤

可以通過 display 屬性來完成行內元素和塊級元素的切換，有三個可選值：

  • block：設定為塊元素。
  • inline：設定為行內元素。
  • inline-block：行內塊元素，讓元素具有塊級元素和行內元素的特性，即能
    設定寬高，margin和padding生效，還可以和其他行內元素並排。

舉個例子：

<!-- test.wxml -->
<view class="container">
  <view class="block-1">塊元素-1</view>
  <view class="block-2">塊元素-2</view>
  <view class="block-3">塊元素-3</view>
  <view class="block-3">塊元素-4</view>
  <text class="inline-1">行內元素-1</text>
  <text class="inline-2">行內元素-2</text>
  <text class="inline-3">行內元素-3</text>
  <view>
    <view class="display-inline">行內塊元素-1</view>
    <view class="display-inline">行內塊元素-2</view>
  </view>
  <view>
    <text class="display-block">行內塊元素-3</text>
    <text class="display-block">行內塊元素-4</text>
  </view>
  <view>
    <view class="display-inline-block">行內塊元素-5</view>
    <view class="display-inline-block">行內塊元素-6</view>
  </view>
</view>
複製程式碼
/* test.wxss */
/* 塊元素 */
.block-1{
  background: red
}
/* 塊元素可以直接設定margin和padding */
.block-2 {
  background: greenyellow;
  margin-right: 50rpx;
  margin-top: 50rpx;
  padding-bottom: 25rpx;
  padding-left: 25rpx;
}

/* 塊元素設定寬高，但是依舊是佔一行 */
.block-3 {
  background: paleturquoise;
  height: 96rpx;
  width: 200rpx;
}

/* 行內元素 */
.inline-1 {
  background: red
}

/* 行內元素設定margin和padding，只有水平方向生效 */
.inline-2 {
  background: greenyellow;
  margin-right: 50rpx;
  margin-top: 50rpx;
  padding-bottom: 25rpx;
  padding-left: 25rpx;
}

/* 行內元素設定寬高不生效 */
.inline-3 {
  background: paleturquoise;
  height: 96rpx;
  width: 200rpx;
}

/* 塊元素轉換為行內元素 */
.display-inline {
  display: inline;
  background: orange;
  margin-right: 50rpx;
  padding-bottom: 25rpx;
  padding-left: 25rpx;
}

/* 行內元素轉換為塊元素 */
.display-block {
  display: block;
  background: pink;
  margin-right: 50rpx;
  padding-bottom: 25rpx;
  padding-left: 25rpx;
  margin-top: 40rpx;
  height: 96rpx;
  width: 200rpx;
}

/* 行內塊元素，同時擁有塊級元素和行內元素的特性 */
.display-inline-block {
  display: inline-block;
  width: 300rpx;
  height: 100rpx;
  background: gold;
  margin-left: 50rpx;
  margin-top: 20rpx;
}
複製程式碼

執行結果如下：

0x6、盒子模型

元素被描繪成「矩形盒子」，這些盒子通過一個模型來描繪它的佔用空間，即「盒子模型」。

如圖，盒子模型通過下述四個邊界來描述：

  • Margin（外邊距）—— 邊框外的區域，外邊距是透明的。
  • Border（邊框）—— 圍繞在內邊距和內容外的邊框。
  • Padding（內邊距）—— 內容周圍的區域，內邊距是透明的。
  • Content（內容）—— 盒子的內容，顯示文字和影像。

暫且把這個大盒子稱為「元素框」，設定width和height指的是內容部分寬高，設定內外邊距和邊框不會影響內容區域的尺寸，但是會增加元素框的總尺寸。舉個例子，你定義了一個48rpx48rpx的view，但是如果你還設定了margin或padding，那麼這個元素的元素框尺寸就不止48rpx48rpx了！

① box-sizing屬性

如果你想設定「元素框」的寬高固定，不會因為設定了邊距和邊框而改變寬高，可以使用「box-sizing」來實現，該屬性有下述兩個可選值：

  • content-box：寬高僅是內容寬高，加上padding和border，模型寬高會變大.
  • border-box：以border為邊界，寬高是包括邊框和內邊距的，設定padding模型寬高也不會變。

使用程式碼示例如下：

<!-- test.wxml -->
<view class="view-wrapper">
  <view class="view-1">元素1</view>
  <view class="view-2">元素2</view>
</view>
複製程式碼
/* test.wxss */
page {
  background: gray;
}

view {
  text-align: center;
  width: 240rpx;
  height: 240rpx;
  line-height: 240rpx;
  border: 10rpx solid white;
}

.view-wrapper {
  width: 75%;
  background: gold;
  padding: 50rpx;
  overflow: hidden;
  border: none;
}

.view-1 {
  background: greenyellow;
  box-sizing: content-box;
  float: left;
}

.view-2 {
  background: blueviolet;
  box-sizing: border-box;
  float: right;
}
複製程式碼

執行結果如下：

② 外邊距合併問題

當兩個或更多垂直外邊距相遇時，它們將形成一個外邊距，合併後的外間距高度等於兩個元素中外邊距高度中的較大者。

單看概念有點含糊，寫個簡單的例子來幫助理解（相鄰元素）：

<!-- test.wxml -->
<view class="container">
  <view class="view-1">元素1</view>
  <view class="view-2">元素2</view>
</view>
複製程式碼

接著設定兩個樣式

.view-1 { background: gold; }
.view-2 { background: red; }
複製程式碼

接著按照下述步驟修改樣式：

  • ① view-1設定：margin-bottom: 50rpx。
  • ② 註釋掉view-1的樣式，view-2設定：margin-top: 10rpx。
  • ③ 去掉view-1的註釋。

每一步的結果如下：

如圖，兩個元素最後的邊距是50rpx，而不是50rpx + 10rpx = 60rpx；
接著我們再來試試 負值 的情況

.view-1 { background: gold; margin-bottom: -10rpx}
.view-2 { background: red; margin-top: 30rpx}
複製程式碼

執行結果如下：

不難發現此時的外邊距是20rpx，再試試負數比整數大的情況：

.view-1 { background: gold; margin-bottom: 10rpx}
.view-2 { background: red; margin-top: -20rpx}
複製程式碼

同樣不難發現此時的外邊距是-10rpx，再試試兩個都是負數的情況：

.view-1 { background: gold; margin-bottom: -10rpx}
.view-2 { background: red; margin-top: -20rpx}
複製程式碼

此時的外邊距是-20rpx，分析計算下規律：

  • 一正一負，先求絕對值差(絕對值大-絕對值小)，再設定正負；
  • 同正同負：去絕對值大的那個，在設定正負。

如果不想面對外邊距合併問題，有下述幾種規避方法：

  • ① 下面的元素設定絕對定位：position:absolute;
  • ② 下面的元素設定下浮動：float:left;
  • ③ 任意一個盒子設定為為行內塊元素：dispaly:inline-block；

除了上面這種「相鄰元素」會出現外邊距合併問題外「父子元素」也可能會，
沒有內邊距和邊框隔開。寫個簡單的測試例子體驗下：

<view class="view-1">
  <view class="view-2">元素</view>
</view>
複製程式碼

設定兩個樣式，灰色背景方便對比，設定一個左邊的間距方便看。

page { background: gray; }
.view-1 { background: gold; }
.view-2 { background: red; margin-left: 50rpx;}
複製程式碼

接著按照下述步驟修改樣式：

  • ① view-2設定：margin-top:20rpx。
  • ② 註釋掉view-2，view-1設定：margin-top: 50rpx。
  • ③ 去掉view-2的註釋。

每一步的結果如下：

有下述幾種方法可以規避父子元素外邊距合併問題：

  • ① 父元素設定內邊距：padding-top：1rpx；
  • ② 父元素設定：overflow: hidden;
  • ③ 父元素設定邊框：border:1rpx solid transparent;

關於外邊距合併就說那麼多吧，知道怎麼規避就好，具體原因涉及到BFC(Block Formatting Context，塊級格式化上下文)，目前還不知道具體是啥，後面研究了再另外開一片介紹吧。

0x7、定位

讓元素脫離文件流的辦法是：定位，浮動或者多列布局，這裡先講解一波定位。
通過一個例子來幫助理解，先定義一個沒有使用定位的頁面。

<!-- test.wxml -->
<view class="view-wrapper">
  <view class="view-1">元素1</view>
  <view class="view-2">元素2</view>
  <view class="view-3">元素3</view>
  <view class="view-4">元素4</view>
</view>
複製程式碼
/* test.wxss */
view {
  display: inline-block;
  padding: 10px
}
.view-wrapper { background: gold; }
.view-1 { background: greenyellow; }
.view-2 { background: blueviolet; }
.view-3 { background: orange; }
.view-4 { background: pink; }
複製程式碼

執行結果如下：

① 相對定位

相對於它在「文件流中的位置的起始點」進行移動，通過例子來體驗下，這裡我們為元素2新增下述樣式：

position: relative;
left: 50rpx;
top: 50rpx;
複製程式碼

執行結果如下：

可以看到元素2從起始點開始，左邊和上面都偏移50rpx，此處有個細節：偏移前的空間依舊存在！另外，另外注意 起始點 這個字眼，元素是基於起始點進行偏移的，比如為外層元素設定一個margin-left: 50rpx; 執行後的效果如下：

② 絕對定位

完全從文件流中抽離出來，可放到頁面的任何位置。把上面設定的margin-left:50rpx刪掉，接著把relative; 改為 absolute；執行效果如下：

可以看到，偏移前的空間已被刪除！絕對佈局是這樣的定位的：

「相對於它的父元素來定位」，如果父元素沒有設定定位，就找父元素的父元素，依次往上，直至遇到設定了定位的父元素未知，如果沒找到，就會相對於文件 body進行定位。所以這裡是基於body進行定位的，我們可以試下為外層的view設定position: relative，接著執行看下效果：

購物車那種數字小紅點一般就是用絕對定位實現的。另外還可以通過 z-index 屬性來控制重疊排列順序，值大的在上面。改下樣式：

/* index.wxss */
.view-1 {
  background: greenyellow;
  position: absolute;
  left: 0rpx;
}
.view-2 {
  background: blueviolet;
  position: absolute;
  left: 108rpx;
  top: 20rpx;
}
.view-3 {
  background: orange;
  position: absolute;
  top: 100rpx;
  left: 20rpx
}
.view-4 {
  background: pink;
  position: absolute;
  left: 100rpx;
  top: 80rpx;
}
複製程式碼

執行結果如下：

加入index-z屬性，控制重疊排列順序：

/* index.wxss */
.view-1 {
  background: greenyellow;
  position: absolute;
  left: 0rpx;
  z-index: 50;
}
.view-2 {
  background: blueviolet;
  position: absolute;
  left: 108rpx;
  top: 20rpx;
  z-index: 30;
}
.view-3 {
  background: orange;
  position: absolute;
  top: 100rpx;
  left: 20rpx;
  z-index: 20;
}
.view-4 {
  background: pink;
  position: absolute;
  left: 100rpx;
  top: 80rpx;
  z-index: 10;
}
複製程式碼

執行結果如下：

③ 固定定位

fixed：和absolute類似，超出螢幕的時候也是固定，參考的是視窗，常用於需要懸浮固定的場景。比如商品詳情頁，有個一直固定在底部的購買按鈕，頁面內容可以正常滾動；還有基於視窗的懸浮框等。

0x8、浮動與清除浮動

使元素脫離文件流，按照指定方向(左或右)移動，直到外邊緣碰到包含框或另一個浮動框的邊框為止。浮動前豎向排列，浮動後橫向排列；float屬性，可選值left左，right右。寫個例子體驗下，複用上面的wxml，然後設定新的樣式：

/* test.wxss */
view > view {
  line-height: 100rpx;
  width: 140rpx;
  text-align: center;
}

.view-1 {
  background: greenyellow;
}

.view-2 {
  background: blueviolet;
}

.view-3 {
  background: orange;
}

.view-4 {
  background: pink;
}
複製程式碼

執行效果如下：

接著為元素1設定一個向右的浮動 float:right; 執行結果如下：

如圖，元素1脫離了文件流(所佔空間被刪除)，然後浮動到右側了，如果想調整元素1的位置，可以設定margin，比如這裡設定margin-right:20rpx;

接著我們如果為元素2也設定一個向右的浮動：

按順序排到了右側，之所以沒有像元素1一樣貼著右邊而是在元素1的左側，因為碰到元素1浮動框了。接著為元素4頁設定一個右浮動：

另外有一種情形要注意一下，把樣式檔案修改為：

/**index.wxss**/

view > view {
  line-height: 100rpx;
  width: 240rpx;
  float: left;
  text-align: center;
}

.view-1 {
  background: greenyellow;
  height: 140rpx;
}

.view-2 {
  background: blueviolet;
}

.view-3 {
  background: orange;
}

.view-4 {
  background: pink;
}
複製程式碼

包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”.

接著說下「清除浮動」，示例程式碼如下：

<!-- test.wxml -->
<view class="view-wrapper">
  <view class="view-1">元素1</view>
  <view class="view-2">元素2</view>
</view>
複製程式碼
/* test.wxss */
page {
  background: gray;
}

.view-wrapper {
  width: 75%;
  background: gold;
  padding: 10rpx;
}

view > view {
  width: 240rpx;
  text-align: center;
}

.view-1 {
  background: greenyellow;
}

.view-2 {
  background: blueviolet;
}

.view-3 {
  background: orange;
}

.view-4 {
  background: pink;
}
複製程式碼

執行結果如下：

接著為兩個元素分別設定左和右的浮動，執行結果如下：

臥槽，怎麼就這樣了？浮動帶來的影響，可以為通過設定屬性overflow: hidden; 來清除浮動。

除此之外還可以新增一個元件，然後設定clear:both實現相同的效果。

<view style="clear:both"/>
複製程式碼

還有一種玩法：通過偽元素:after直接新增

.view-2:after {
  content: "";
  display: block;
  clear: both;
}
複製程式碼

當然，你也可以直接寫死容器元素的高度~

0x9、多列布局multi-column

CSS3新增了一個多欄佈局，用來實現「文字多列」和「瀑布流」非常方便，就順帶講下吧~

相關屬性如下：

  • column-rule-style：列與列間的邊框樣式；
  • column-rule-width：兩列的邊框厚度；
  • column-rule-color：兩列的邊框顏色；
  • column-rule：上述所有屬性的簡寫，示例: column-rule: 1px solid lightblue;
  • column-count：建立多列，指定需要分割的列數；
  • column-width：列的寬度；
  • columns：column-width 和 column-count 的簡寫。
  • column-gap：列與列間的間隙；
  • column-span：是否跨多欄顯示；
  • column-fill：指定如何填充列；

文字多列的程式碼示例如下：

<!-- test.wxml -->
<view class="view-wrapper">
  <view class="view-1">大家好，我是練習時長兩年半的個人練習生菜虛鯤，我喜歡唱，跳，rap，籃球，Music！</view>
</view>
複製程式碼
/* test.wxss */
.view-1 {
  columns:auto 5;
  column-rule: 5rpx solid lightblue;
}
複製程式碼

執行結果如下：

實現一個簡易圖片瀑布流示例如下：

//test.js，新增一堆圖片URL
Page({
  data: {
    pics: [
      "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg",
      "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg",
      "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg",
      "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg",
      "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg",
      "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg",
      "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg",
    ]
  },
})
複製程式碼
<!-- test.wxml，利用wx:for生成控制元件 -->
<view class="content">
  <block wx:for="{{pics}}">
    <image src="{{item}}" mode="widthFix"></image>
  </block>
</view>
複製程式碼
/* test.wxss */
page {
  background: gray;
}

.content {
  columns: auto 3;
  width: 100%;
  column-gap: 5rpx;
}

image {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 5rpx;
}
複製程式碼

執行結果如下：

瀑布流是實現了，但是左下角的蕾姆醬被切成兩半了，如果不想切斷，可以為子元素設定「break-inside」屬性來防止多列布局，分頁媒體和多區域上下文中的意外中斷。直接在image的樣式裡新增：

break-inside: avoid;
複製程式碼

執行後結果如下：

0x10、flex彈性佈局

學習完前面的內容，我們可以通過display，position，float來佈局，但是靈活性較差。2009年，w3c提出了一種新的佈局方案：flex彈性佈局，可以簡便、完整、響應式地實現多種頁面佈局。任何元素都可以開啟彈性佈局，採用Flex佈局的元素，稱為「Flex容器(flex container)」，它裡面所有的子元素會自動成為容器成員，稱為「Flex 專案(flex item)」。

留意下上面的「主軸」和「側軸」，其實就是「水平」和「垂直」兩個方向。
Flex的屬性分為兩個部分：「容器屬性」和「專案屬性」，具體如下圖所示：

因為屬性較多，限於偏於，也不一一展示具體效果了，Runoob上有對應的效果展示，讀者請自行移步至：
www.runoob.com/cssref/css3…，檢視學習：

最後再提下和flex有關的兩點：

第一點

設定flex佈局後，子元素的float，clear和vertical屬性將失效！

第二點：

行內元素也可以使用Flex佈局，設定display:inline-flex;即可。

0x0、佈局實戰：寫個摳腚優鮮的首頁

Tips：因內容太多，實戰部分拆分到另一篇中：juejin.im/post/5d1db9…

小結

相信讀者學完本節，基本可以應付日常小程式頁面的堆砌了。這種實操性比較強的東西，切忌死記，建議自己找些小程式仿寫下，熟能生巧，別說沒有設計稿，沒有圖片沒有尺寸，上節學的反編譯技能呢？？？

筆者不是專業前端，以上內容都是現學現賣，如有紕漏或建議，歡迎評論區指出，謝謝~
原始碼整理下再丟Gayhub，後面再發個地址哈~(另外，蹲個深圳3年半的Android坑)

參考文獻：

如果本文對你有所幫助，歡迎
留言，點贊，轉發
素質三連，謝謝?~

相關文章