最近這段時間我看學習微信小程式的人還不少，正好公司不是太忙也就看了下，但是由於我是安卓出身，沒有學過前端的東西，所以有挺多東西學起來還是比較吃力的，正好在這裡講自己學習到的東西一點點的記錄下，方便自己記憶，也希望有一起學習的能功能成長。

本文記錄的是view元件和Flexbox之間的關係，在小程式的wxml檔案裡面編寫佈局時需要用到Flexbox，相信前端的同學並不陌生，Flexbox旨在提供一個更加有效的方式制定、調整和分佈一個容器裡的專案佈局，即使他們的大小是未知或者是動態的。我是參照著這篇文章自己手動敲了一遍並且深刻的記憶了下：(http://www.w3cplus.com/css3/a-guide-to-flexbox.html

我覺得Flexbox裡面用的最多的應該是一下幾個屬性：display、flex-wrap、flex-direction、justify-content、align-items，下面依次說明下這幾個屬性

常用的有flex、inline-flex兩種，在不設定其他屬性的情況下，flex是完全包裹內部子元素，inline-flex的寬高自適應子元素所需要的大小，看下面兩個圖就能一目瞭然：


第一張圖對應的佈局為：

 <view style= "display:flex; flex-direction:row">
 ...中間省略只是顏色快的view
 </view>
 

第二張圖對應的佈局為

<view style= "display:inline-flex; flex-direction:row">
...中間省略只是顏色快的view
 </view>

通過對比以上以上兩圖可以發現flex會將內部子元素進行壓縮，而inline-flex會自適應寬度。

flex-wrap:主要說明子元素是否換行，有wrap、nowrap、wrap-reverse三種選擇，預設是nowrap(沒有換行),wrap是可以換行，wrap-reverse是指和wrap相反的方向展示換行資料。

flex-direction:主要說明子元素展示方向，有row、row-reverse、column、column-reverse四中方向，其中row和row-reverse都標示橫向展示，只不過這兩個展示順序相反；column和column-reverse都標示縱向展示，這兩個也是展示順序相反。

justify-content:標示子元素在主軸線的對齊方式，有flex-start、flex-end、center、space-between、space-around五中方式，預設flex-start，這五個屬性由以下一張圖就能很好的說明其具體作用：

align-items:主要說明子元素在側軸上的對齊方式，有flex-start、flex-end、center、baseline、stretch，預設stretch，這幾種屬性由以下一張圖進行說明：

我幾天學習的Flexbox大概就是這些內容，其它的一些屬性也都手動敲了一遍，但是感覺沒有這些屬性常用些，其它的屬性就等我真正做專案了再往這裡面新增吧。