tip：rpx根據機型不同的解析度自己調整符合解析度的值，動態
容器
****
1.flex-direction:元素排列方式
.container
2.flex-wrap:排列不下換行
nowrap預設不換行
wrap換行
wrap-reverse翻轉，第一行在下面
3.flex-flow:前倆的簡寫
flex-flow：row warp;
4.justify-content:主軸上的對齊方式
center在主軸上居中
flex-start預設左邊
flex-end右邊
space-around每個元素間隔相等距離（兩端也有距離）
space-between兩端對齊中間有相同間隔（兩端無距離）
5.align-items:交叉軸上的對齊方式
center在交叉軸上居中
flex-start預設上邊
flex-end下邊
stretch當元素沒有設定高度時，自動讓元素佔滿容器的高度
baseline元素以元素內的文字對齊
元素
不能用在container裡面
1.flex-grow:有多餘空間時，元素放大比例
0預設 1份 2份
2.flex-shrink:空間不足，縮小比例
1預設 空間不足等比縮小 0不縮小
3.flex-basis:元素在主軸上佔據的空間
4.flex：前三的簡寫
5.order:定義元素排列順序
="item" style=
"order:4"
>
1<
/view>
align-self：center;可以定義單獨乙個元素
當兩個元素沒有重疊和覆蓋，乙個元素覆蓋到兩個地方
相對定位：相對自身進行定位，參照物是自己
position:relative;
left:150px;//在原來該元素所在的位置，向右移動
top：150px;//向下移動
絕對定位：相對離它最近的乙個已定位的父級元素進行定位
position:absolute;
left:150px;//向右移動
top：150px;//向下移動
若找不到這樣的父級元素，會以頁面進行絕對定位
微信小程式 布局
傳送門 傳送門 語法 margin auto length 引數 margin 10px 11px 9px 8px 按順序分別代表物件與父容器的上 右 下 左的距離值為10px,11px,9px,8px。auto 值被設定為相對邊的值 length 由浮點數字和單位識別符號組成的長度值 百分數。百分...
微信小程式 學習筆記5 UI布局
flex布局基礎 相對定位和絕對定位 flex容器屬性 flex direction決定元素的排列方向 flex wrap決定元素如何換行 flex flow是 flex direction和flex wrap的簡寫，如flex flow row wrap justify content元素在主軸上...
微信小程式布局display flex布局介紹
display flex是將物件作為彈性伸縮盒顯示。伸縮盒最新版本 css3 在web網頁中必須要考慮相容性，因為瀏覽器不同，瀏覽器的支援和實現方式也不同，導致相容起來略顯麻煩 設定乙個容器，其中有多個子容器，比如，這是乙個簡單的例子 style width 400px height 120px b...