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

    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