微信小程序学习笔记（7）--------布局基础

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

    2、absolute