「4.0」一我的開發一個App，小程序從0到1，佈局

一提到佈局這個詞，我老是索索發抖，不是由於天冷，而是由於佈局的目標實在太宏大。古代想雄霸天下的王，就喜歡佈局這個，佈局那個，結果硬生生把本身的國家給佈局沒了。至因而哪一個君王，我倒能夠很是認真，很是坦誠地告訴你，那我的不是我，也不是你。

不然咱們哪有時間在這裏用小程序佈局手機界面。一個小小手機界面，就有不少花樣，那跟大餅臉臉同樣大的平板， 不是須要花費更多功夫？

其實能夠不是的，只要你在佈局界面的時候，留多點空白就行了。更最簡單的辦法，就是所有空白，什麼都不放，只是這樣的話，老闆會讓你早點滾蛋。若是不想滾，仍是老老實實地佈局吧。

4.1  佈局

小程序的佈局，可從左到右，從上到下；可從右到左，從下到上；可左青龍右白虎，上朱雀下玄武。反正，正反均可以，你喜歡就好。

若是從左到右佈局，那就是橫向佈局；從右到左，那就是反橫向佈局；若是從上到下，就是縱向佈局，從下到上，就是反縱向佈局。橫縱佈局，是古代兵家經常使用的戰略，沒想到程序員也懂。開不開心，雞不雞凍，嘚不嘚瑟？

若是你剛剛說開心，說雞凍，說嘚瑟，那你完了，你高興得太早了，畢竟小程序佈局的技術，Flex都還沒開始學，等學會再嘚瑟吧。

Flex是Flexible Box的縮寫，意爲」彈性佈局」，能夠支持從左到右，從上到下，

從右到左，從下到上，左青龍右白虎，上朱雀下玄武。

先來左右和上下的，而後，而後就沒有而後了。打開index.wxss，洋洋灑灑地敲下以下代碼。

/* 橫向佈局：從左到右 */

.zy {

display: flex;

display: -webkit-flex;

flex-direction: row;

justify-content: center;

color: #fff;

}

/* 縱向佈局：從上到下 */

.sx {

display: flex;

display: -webkit-flex;

flex-direction: column;

align-items: center;

color: #fff;

}

打開index.wxml，洋洋傻傻地輸入以下內容,並運行看看效果，漂不漂亮，正不正點？--說漂亮的都是藝術家，說正點的都是色鬼，愛顏色的鬼。愛顏色的鬼，就是那些最喜歡研究Flex(佈局)的色鬼。

<view class="zy">

<view>第1格</view>

<view>第2格</view>

</view>

<view class="sx">

<view>第3格</view>

<view>第4格</view>

</view>

4.2  Flex

又到我秀英語的時刻了，我不用查詞典就能夠負責地告訴你：Flex是Flexible Box的縮寫，是彈性佈局的意思，Understand?就算不stand也不要緊的，我仍是要接着說的。

flex經過display聲明，用flex-direction指定佈局方向。

4.2.1 佈局方向

左到右值爲：row(默認值)；

右到左值爲：row-reverse；

上到下值爲：column；

下到上值爲：column-reverse。

4.2.2 橫向對齊

在橫向佈局時，可經過justify-content指定項目的對齊方式。

左對齊：flex-start;

居中對齊：center;

右對齊：flex-end；

兩端對齊：space-between,項目之間的間隔都相等；

間隔相等：space-around，每一個項目兩側的間隔；

左青龍右白虎值爲：暫不支持，圖片來安慰。沒青龍白虎的，不要找我要，這兩個寵物我不賣。

若是橫向內容有太多的話，怎麼對齊都沒用，由於根本放不下。這時可用flex-wrap指定是否換行。nowrap（默認），不換行；wrap：換行，第一行在上方；wrap-reverse：換行，第一行在下方。

4.2.3 縱向對齊

縱向佈局，經過align-items的值指定。

上對齊：flex-start;

居中對齊：center;

下對齊：flex-end；

自動對齊：stretch（默認值）, 佔滿整個容器的高度；

上朱雀下玄武：暫不支持，圖片來安慰，沒有朱雀玄武的不要找我要，這兩個家禽你養不起。

糟了，原本打算介紹代碼的，沒說到動物世界去，這可怎麼辦？--涼拌炒雞蛋，我就亂說一通，看你能把我怎麼樣？--疼，疼，疼，別再打了。再打我就跟產品經理同樣，沙雕了。

一沙雕，突然發現有個-webkit-flex沒做解釋。可這個真沒什麼好解釋的,它就是爲了兼容Webkit內核的瀏覽器(如蘋果的Safari)而存在的，你加上就對了。若是實在想弄清楚緣由的話，那就打電話給微信的產品經理吧。

你繼續打你的電話，我接着往下說，說下平均佈局。

4.3  平均佈局

在index.wxss文件裏，新增以下代碼，可以讓橫向項目(view)平均分配。這種寫法，表示在zy下的view組件(項目)，都應用這個樣式。這是一種特高級寫法，通常人都學不會，你看兩眼就懂了，厲害，厲害。來，給本身一把掌，權當獎賞。打完以後，能夠了解一下與子項目相關的屬性。

.zy view {

flex: 1;

border: 1px solid red;

text-align: center;

}

 

4.3.1 子項目屬性

在父(zy)元素flex下的子項目，有6大屬性。

1. order屬性

用來排列項目順序，值(正整數)越小，越靠前；這有插隊嫌疑，原本2排在1後面，卻可經過order這個關係，走到1前面去;

2. flex-shrink屬性

指定項目縮小比例(正整數)，當空間不夠時，誰被指定，誰就縮小，誰都不指定，你們一塊兒縮小,好啊，大有有福同享有難你當的滋味；

3. flex-grow屬性

默認值爲0。有了，才能夠分。這是一個程序員哥哥分梨的故事，程序員對他弟弟說：我是哥哥，比你大，我讓着你，我分2個，你分1個。

在index.wxss文件裏新增以下代碼：

/*哥哥來分梨*/

.fl {

display: flex;

display: -webkit-flex;

flex-direction: row;

justify-content: center;

color: #fff;

}

.dd {

flex-grow: 1;

border: 1px solid red;

text-align: center;

}

.gg {

flex-grow: 2;

border: 1px solid red;

text-align: center;

}

在index.wxml裏，新增以下代碼：

<view class="fl">

<view class="dd">弟弟</view>

<view class="gg">哥哥</view>

</view>

4. align-self屬性

容許指定的單個項目，可與其餘項目不同的對齊方式。

5. flex-basis屬性

指定的項固定大小(長度值，如200rpx)。其他的別人去分配。

這跟項目經理分配獎金時，是一個樣的。1萬塊的獎金，先給本身留9900元，剩下的100元，由10個程序員自由分配。至因而否真有這回事，我也不清楚。我沒當過項目經理，我一直當的是技術總監。別打我啊，哎呀，哎呦，疼，痛，並快樂着。

6. flex屬性 

flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

好了，今天碼字碼到都得帕金森了，手一直在抖。若是文章對你有所幫助，就轉發出去吧。你一轉發，個人手立刻就好，立刻開始續寫篇章，譜寫下一節的內容，組件組建。