微信小程式布局學習筆記

2021-10-03 08:38:07 字數 842 閱讀 2027

flex容器屬性功能值

flex-direction

決定元素的排列方向

row /row-reverse /column /column-reverse

flex-wrap

決定元素換行方式

nowrap/wrap/ wrap-reverse

justify-content

決定元素在主軸上的對齊方式

flex-start/flex-end/center /space-between/space around

align-items

決定元素在交叉軸的對齊方式

flex-start/flex-end/center /baseline/stretch

其中flex-direction和flex-wrap可以簡寫為flex-flow。

flex元素屬性

功能flex-grow

當有多餘空間時,元素的放大比例

flex-shrink

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

flex-basis

元素在主軸上佔據的空間

order

定義元素的排列順序

align-self

定義元素自身的對齊方式

其中grow、shrink、 basis的可簡寫為flex。

使用view標記巢狀,修改flex屬性,整體類似從前學習過的css和div布局。

相對定位和絕對定位

相對定位的元素是以自身作為參照物進行定位。

屬性-position:relative;

絕對定位的元素是相對離它最近固定元素進行定位。

屬性-position:absolute;

微信小程式 布局

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

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

1.flex direction 決定了元素的排列方向 row 水平排列,colum 垂直排列 2.flex wrap 決定了元素如何換行 有意思的是,wrap reverse 可以顛倒上下的布局,把頂部的元素對稱的放在底部 3.flex flow 是flex direction和flex wrap...

微信小程式學習筆記

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