一提到布局這個詞，我總是索索發(fā)抖，不是因為天冷墓阀，而是因為布局的目標(biāo)實在太宏大。古代想雄霸天下的王拓轻，就喜歡布局這個斯撮，布局那個，結(jié)果硬生生把自己的國家給布局沒了扶叉。至于是哪個君王勿锅，我倒可以非常認(rèn)真，非常坦誠地告訴你枣氧，那個人不是我溢十，也不是你。
否則我們哪有時間在這里用小程序布局手機(jī)界面达吞。一個小小手機(jī)界面张弛，就有很多花樣，那跟大餅?zāi)樐樢粯哟蟮钠桨澹?不是需要花費更多功夫酪劫？
其實可以不是的吞鸭，只要你在布局界面的時候，留多點空白就好了覆糟。更最簡單的辦法刻剥，就是全部空白，什么都不放滩字，只是這樣的話造虏，老板會讓你早點滾蛋御吞。如果不想滾，還是老老實實地布局吧漓藕。
4.1 布局
小程序的布局陶珠，可從左到右，從上到下撵术；可從右到左背率，從下到上话瞧；可左青龍右白虎嫩与，上朱雀下玄武。反正交排，正反都可以划滋，你喜歡就好。
如果從左到右布局埃篓，那就是橫向布局处坪；從右到左，那就是反橫向布局架专；如果從上到下同窘，就是縱向布局，從下到上部脚，就是反縱向布局想邦。橫縱布局，是古代兵家常用的戰(zhàn)略委刘，沒想到程序員也懂丧没。開不開心，雞不雞凍锡移，嘚不嘚瑟呕童？
如果你剛剛說開心，說雞凍淆珊，說嘚瑟夺饲，那你完了，你高興得太早了施符，畢竟小程序布局的技術(shù)钞支，F(xiàn)lex都還沒開始學(xué)，等學(xué)會再嘚瑟吧操刀。
Flex是Flexible Box的縮寫烁挟，意為”彈性布局”，可以支持從左到右骨坑，從上到下撼嗓，
從右到左柬采，從下到上，左青龍右白虎且警，上朱雀下玄武粉捻。
先來左右和上下的，然后斑芜，然后就沒有然后了肩刃。打開index.wxss，洋洋灑灑地敲下如下代碼杏头。
/* 橫向布局：從左到右 */
.zy {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: center;
background-color: #49acb2;
color: #fff;
}
/* 縱向布局：從上到下 */
.sx {
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: center;
background-color: #ecc42f;
color: #fff;
}
打開index.wxml盈包，洋洋傻傻地輸入如下內(nèi)容,并運行看看效果，漂不漂亮醇王，正不正點呢燥？--說漂亮的都是藝術(shù)家，說正點的都是色鬼寓娩，愛顏色的鬼叛氨。愛顏色的鬼，就是那些最喜歡研究Flex(布局)的色鬼棘伴。
<view class="zy">
<view>第1格</view>
<view>第2格</view>
</view>
<view class="sx">
<view>第3格</view>
<view>第4格</view>
</view>
4.2 Flex
又到我秀英語的時刻了寞埠，我不用查詞典就可以負(fù)責(zé)地告訴你：Flex是Flexible Box的縮寫，是彈性布局的意思焊夸，Understand?就算不stand也沒關(guān)系的仁连，我還是要接著說的。
flex通過display聲明淳地，用flex-direction指定布局方向怖糊。
4.2.1 布局方向
左到右值為：row(默認(rèn)值)；
右到左值為：row-reverse颇象；
上到下值為：column伍伤；
下到上值為：column-reverse。
4.2.2 橫向?qū)R
在橫向布局時遣钳，可通過justify-content指定項目的對齊方式扰魂。
左對齊：flex-start;
居中對齊：center;
右對齊：flex-end；
兩端對齊：space-between,項目之間的間隔都相等蕴茴；
間隔相等：space-around劝评，每個項目兩側(cè)的間隔；
左青龍右白虎值為：暫不支持倦淀，圖片來安慰蒋畜。沒青龍白虎的，不要找我要撞叽，這兩個寵物我不賣姻成。
如果橫向內(nèi)容有太多的話插龄，怎么對齊都沒用，因為根本放不下科展。這時可用flex-wrap指定是否換行均牢。nowrap（默認(rèn)），不換行才睹；wrap：換行徘跪，第一行在上方；wrap-reverse：換行琅攘，第一行在下方垮庐。
4.2.3 ?縱向?qū)R
縱向布局，通過align-items的值指定乎澄。
上對齊：flex-start;
居中對齊：center;
下對齊：flex-end突硝；
自動對齊：stretch（默認(rèn)值）, 占滿整個容器的高度测摔；
上朱雀下玄武：暫不支持置济，圖片來安慰，沒有朱雀玄武的不要找我要锋八，這兩個家禽你養(yǎng)不起浙于。
糟了，本來打算介紹代碼的挟纱，沒說到動物世界去羞酗，這可怎么辦？--涼拌炒雞蛋紊服，我就亂說一通檀轨，看你能把我怎么樣？--疼欺嗤，疼参萄，疼，別再打了煎饼。再打我就跟產(chǎn)品經(jīng)理一樣讹挎，沙雕了。
一沙雕吆玖，忽然發(fā)現(xiàn)有個-webkit-flex沒作解釋筒溃。可這個真沒什么好解釋的,它就是為了兼容Webkit內(nèi)核的瀏覽器(如蘋果的Safari)而存在的沾乘，你加上就對了怜奖。如果實在想弄清楚原因的話，那就打電話給微信的產(chǎn)品經(jīng)理吧翅阵。
你繼續(xù)打你的電話歪玲，我接著往下說尽爆，說下平均布局。
4.3 平均布局
在index.wxss文件里读慎，新增如下代碼漱贱，可讓橫向項目(view)平均分配。這種寫法夭委，表示在zy下的view組件(項目)幅狮，都應(yīng)用這個樣式。這是一種特高級寫法株灸，一般人都學(xué)不會崇摄，你看兩眼就懂了，厲害慌烧，厲害逐抑。來，給自己一把掌屹蚊，權(quán)當(dāng)獎賞厕氨。打完之后，可以了解一下與子項目相關(guān)的屬性汹粤。
.zy view {
flex: 1;
border: 1px solid red;
text-align: center;
}
4.3.1 ?子項目屬性
在父(zy)元素flex下的子項目命斧，有6大屬性。
1. order屬性
用來排列項目順序嘱兼，值(正整數(shù))越小国葬，越靠前；這有插隊嫌疑芹壕，本來2排在1后面汇四，卻可通過order這個關(guān)系，走到1前面去;
2. flex-shrink屬性
指定項目縮小比例(正整數(shù))踢涌，當(dāng)空間不夠時通孽，誰被指定，誰就縮小斯嚎，誰都不指定利虫，大家一起縮小,好啊，大有有福同享有難你當(dāng)?shù)淖涛叮?/p>
3. flex-grow屬性
默認(rèn)值為0堡僻。有了糠惫，才可以分。這是一個程序員哥哥分梨的故事钉疫，程序員對他弟弟說：我是哥哥硼讽，比你大，我讓著你牲阁，我分2個固阁，你分1個壤躲。
在index.wxss文件里新增如下代碼：
/*哥哥來分梨*/
.fl {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: center;
background-color: #80ba49;
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)并齐。其余的別人去分配漏麦。
這跟項目經(jīng)理分配獎金時，是一個樣的况褪。1萬塊的獎金撕贞，先給自己留9900元，剩下的100元测垛，由10個程序員自由分配捏膨。至于是否真有這回事，我也不清楚食侮。我沒當(dāng)過項目經(jīng)理号涯，我一直當(dāng)?shù)氖羌夹g(shù)總監(jiān)。別打我啊疙描，哎呀诚隙，哎呦讶隐，疼起胰，痛，并快樂著巫延。
6. flex屬性?
flex-grow, flex-shrink 和 flex-basis的簡寫效五，默認(rèn)值為0 1 auto。后兩個屬性可選炉峰。
好了畏妖，今天碼字碼到都得帕金森了，手一直在抖疼阔。如果文章對你有所幫助戒劫，就轉(zhuǎn)發(fā)出去吧。你一轉(zhuǎn)發(fā)婆廊，我的手馬上就好迅细，馬上開始續(xù)寫篇章，譜寫下一節(jié)的內(nèi)容淘邻，組件組建茵典。
