微信小程式CSS語法

2021-09-24 05:26:53 字數 958 閱讀 9679

指定容器為flex容器(display: flex),容器可以巢狀使用;容器裡面的元素為flex元素;

一,flex容器屬性詳解

1) flex-flow: 是 flex-direction 和 flex-wrap的簡寫,語法;flex-flow: row   wrap;

flex-direction: 決定元素的排列方向(預設主軸為橫向排列: row,交叉軸為:column)

flex-wrap: 決定元素在主軸排列不下時,如何換行: nowrap , wrap,  wrap-reverse;

2) justify-content: 元素在主軸上的對齊方式( flex-start(預設),flex-end,center,space-around,space-between )

3) align-items: 元素在交叉軸的對齊方式; ( flex-start(預設),flex-end,center,stretch(當元素沒有設定高度時,自動佔滿容器高度),baseline(以元素裡面一行文字為對齊方式) )

二,flex元素屬性詳解

1) flex:是 grow、shrink、basis的簡寫

flex-grow:當空間有多餘時,元素的放大比例,預設0不放大,放大的比例佔多餘空間的幾分之幾

flex-shrink:當空間不足時,元素的縮小比例,預設1等比縮小,設定為0則不進行縮小,縮小的比例佔多餘空間的幾分之幾

flex-basis:元素在主軸上佔據的空間,可能不支援rpx

2) order:定義元素在主軸方向的排列順序,從小到大

3) align-self:定義元素自身的對齊方式

三,相對定位和絕對定位

相對定位的元素是相對於自身進行定位,參照物是自己;  position: relative; left: 50 rpx; top: 50rpx;

絕對定位的元素是相對於 離它最近的乙個已定位的父級元素進行定位 position: absolate

微信小程式語法

1.匯入,匯出 匯出js module.exports 在js中匯入js var common require utils common.js common.loadinfo options.id,this 在html中匯入模板html 絕對路徑 相對路徑 在html中匯入html頁面 絕對路徑 相...

微信小程式基本語法

page page page true falsepage id則代表繫結值 true falsepage true false 定義的列表渲染出來,再指定乙個key,index代表下標 page itemc 1.is 繫結下面的name值,data將item傳送到js元件,js的書寫就可以渲染出來...

微信小程式CSS布局

採用flex布局的元素,稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex專案 flex item 簡稱 專案 1 flex direction flex direction屬性決定主軸的方向 即專案的排列方向 row 預設值 主軸為水平方向,起...