學習筆記 微信小程式的布局基礎

2021-08-19 06:31:52 字數 1404 閱讀 8477

1.    flex-direction 決定了元素的排列方向

row:水平排列,colum:垂直排列

2.    flex-wrap 決定了元素如何換行

有意思的是,wrap-reverse:可以顛倒上下的布局,把頂部的元素對稱的放在底部

3.    flex-flow 是flex-direction和flex-wrap的縮寫

flex-flow

: row

wrap

;4.    justify-content 元素在direction指示方向上的對齊操作

center:在軸上居中,flex-start:從軸的最左邊開始排列(預設),flex-end:從軸的最右邊開始排列

space-around:每個元素在主軸上平分左右的空餘空間(平分的效果,邊緣元素不貼壁),space-between:每個元素在主軸上平分空餘空間(邊緣元素貼壁)

5.   

align-items 元素在垂直於direction指示方向上的對齊操作

flex-start:居於交叉軸頂部(預設),flex-end:居於交叉軸底部,cente:居於中間

有意思的是,當使用stretch時,如果不指定高和寬,那麼元素會主動佔滿整個容器;當使用baseline時,對齊的標準不是元素了,而是元素的文字。

6.   

flex-grow 當有多餘的元素時,元素的放大比例

預設值為0,設為1的時候元素會填充掉整個剩餘空間,或者讓某個元素佔相應比例的空間

7.    flex-shrink

當空間不足時,元素的縮小比例

預設值為1,可以設定某一元素的值為0,使其不被壓縮

8.   

flex-basis

元素在主軸上佔據的空間

9.  flex

是grow、shrink、basis的縮寫

10.  order 定義元素的排列順序

11.  align-self 定義元素自身的對齊方式

令某一元素脫離所在的容器標定的align-items效果,自己決定自己的效果

微信小程式布局學習筆記

flex容器屬性功能值 flex direction 決定元素的排列方向 row row reverse column column reverse flex wrap 決定元素換行方式 nowrap wrap wrap reverse justify content 決定元素在主軸上的對齊方式 f...

微信小程式 布局

傳送門 傳送門 語法 margin auto length 引數 margin 10px 11px 9px 8px 按順序分別代表物件與父容器的上 右 下 左的距離值為10px,11px,9px,8px。auto 值被設定為相對邊的值 length 由浮點數字和單位識別符號組成的長度值 百分數。百分...

微信小程式學習筆記

1 background image 只能用網 絡url 或者base64 本地圖 片要用image 標籤才行 2 事件綁 定value 是乙個字串,需要在對應的 page 中定義 同名的函式。不然當觸 發事件的時候會 報錯。3 bind事件綁 定不會阻止冒泡事件向上冒泡,catch事件綁 定可以阻...