小程序布局篇
小程序布局篇
小程序布局標簽介紹
布局方式
小程序布局篇
從初始小程序以來,有半年時間了,一直都是摸索著前進,項目已經成型,以后會一點點記錄下,做小程序以來趟過得坑,和一些技術的實現。

小程序布局標簽介紹
小程序的標簽相對于HTML來說布局相對簡單,不在需要div , 主要標簽做到了很好的手機端兼容,也是小程序主要的布局需要:

快速上手
第一眼看到小程序的API,眼花繚亂,根本不知道從何下手,其實想要快速了解布局很容易,在這里我們把平時在HTML里面布局用的
標簽想象成小程序里面的,這樣想理解起來就會容易很多,除了標簽的名字不一樣,基本的樣式配置都是和
大同小異的。
布局方式
在小程序里面只要了解三個代碼,頁面的布局和構建基本就夠用了。
1.flex-direction:(主要用于父級的view樣式)
這個代碼有三個屬性,

水平布局屬性:

(1).row //這個屬性的意思就是從左向右排列。(左對齊)
(2).row-reverse //這個屬性的意思是從右向左對齊(右對齊)

垂直布局屬性:

(1).column//主軸與塊軸方向作為默認的書寫模式。即縱向從上往下排列(頂對齊)
(2).column-reverse://這個屬性的正好與column相反

2.display:flex(主要用于子級的view樣式,只有在父級用了flex-direction才會生效)

3.justify-content:(主要用于view的對齊方式)分為以下5種對齊方式

(1).flex-start(默認值):左對齊
(2).flex-end:右對齊
(3).center: 居中
(4).space-between:兩端對齊,項目之間的間隔都相等。
(5).space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。

以三個代碼,基本能滿足大部分,小程序布局的需求了,很簡單,也很實用,這是我布局用的最多的方法。都是樣式,只要記住了,使用起來并不是很難,如果有特殊復雜的布局方式,就要開動大家的小腦袋瓜好好的想一想了,當然小程序的 API也提供了其他的多重化布局方式,如有需要可以自行去了解。