ui布局基礎

一、flex布局

1、flex的容器和元素

2、flex容器屬性詳解

1>flex-direction不僅設置元素的排列方向，還設置主軸和交叉軸如下圖主軸是由上到下

2>flex-wap決定元素如何換行（排列不下時）

flex-wap：wap

flex-wap：nowap

flex-wrap: wrap-reverse

3>flex-flow 是flex-direction和flex-wap的簡寫

4>justify-content元素再主軸上的對齊方式

justify-content: flex-end

justify-content: flex-start

justify-content: center

justify-content: space-around(在主軸上所占的空間是一樣的)

justify-content: space-between（兩端對齊，中間的間隔是一樣的）

5>aligin-items元素再交叉軸的對齊方式

align-items: flex-start

align-items: flex-end

align-items: center

align-items: stretch（不設置高度時，自動使每個item占滿整個容器的高度）

align-items: baseline（讓元素以元素裏面的一行文字的基線對齊）

Index.wxml

index.wxss

3、flex元素屬性詳解

1>flex-grow當有多余空間時，元素的放大比例

flex-grow: 0;容器有多余的空間時也不放大。

flex-grow: 1;（每個都占一份）

將3設置為 flex-grow: 2;（當容器有多余空間的時候，1、2、4只占據一份，3占據兩份）

2>flex-shrink當空間不足時，元素的縮小比例

flex-shrink: 1;（默認值，空間不足時默認等比縮小）

flex-shrink: 0;（空間不足時不縮小）

1、2、4縮小一份，3縮小10份

3>flex-basis元素再主軸上占據的空間

3在主軸上占據200rpx

4>flex是grow、shrink、basis的簡寫

order定義元素的排列順序

在item中設置元素的排列順序

在wxml文件中設置元素的順序

align-sellf 定義元素自身的對齊方式會復寫 justify-content

二、相對定位和絕對定位

相對定位的元素是相對自身進行定位，參照物是自己。

絕對定位的元素是相對離它最近的一個已定位的父級元素進行定位。

1、relative;

相對自己向左偏移150rpx

微信小程序學習筆記（7）--------布局基礎