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事件綁 定可以阻...