微信小程序入门三之Flex布局

？遇到的问题

• 1、tabBar切换，改变导航条的标题
  在页面的.json里面编写，注意在根节点写，不要画蛇添足加windows节点！！

{
  "navigationBarTitleText": "我是标题",
}

• 2、无法直接用本地图片设置为View标签背景图片
  微信报错提示：本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。
  解决方案：
  1、使用网络图片:
  background-image: url(“https://xxxx/xxx.jpg“);
  2、将背景图片使用编码base64进行转换（缺点是一大段乱码，不方便阅读）
  可以在这个网址进行 http://www.css-js.com/tools/base64.html 转换，如：background-image: url(“转换后得到的编码文本”），如果多次使用的话可以将该值设置为全局变量，再在js文件进行引用即可；
  3、使用image组件而去掉背景图片；

！UI布局基础

Flex布局（能实现浮动布局的所有功能）、相对定位和绝对定位

Flex布局

整个灰色矩形是一个容器，item1和2是子元素。可自定义主轴和交叉轴的方向。

属性
- Flex 容器属性
- flex-direction
决定元素的排列方向
- flex-wrap
决定元素如何换行（排列不下时）
- flew-flow
flew-direction和flew-wrap的简写
- justify-content
元素在主轴上的对齐方式
- align-items
元素在交叉轴的对齐方式
- Flex 元素属性
- flex-grow
当有多余空间时，元素的放大比例
- flew-shrink
当空间不足时，元素的缩小比例
- flew-basis
元素在主轴上占据的空间
- flex
是grow、shrink、basis的简写
- order
定义元素的排列顺序
- align-self
定义元素自身的对齐方式（这个属性会覆盖容器的justify-content和align-items属性的作用）

来来来，实践一把！

删掉app.json的样式，

/**index.wxml**/
<view class="container">
  <view class="item">
  1
  </view>
  <view class="item">
  2
  </view>
  <view class="item">
  3
  </view>
  <view class="item">
  4
  </view>
</view>
/**index.wxss**/
.container{
  height: 100%;
  width: 100%;
  background-color: fuchsia;
}
.item{
  width: 100rpx;/*微信小程序獨有的像素單位，隨屏幕分辨率動態變化*/
  height: 100rpx;
  border: 1px solid #fff;
}

效果图一：

修改为flex容器

/**index.wxss**/
.container{
  height: 100%;
  width: 100%;
  background-color: fuchsia;
  display: flex; //指明作为flex容器
}

.item{
  width: 100rpx;/*微信小程序獨有的像素單位，隨屏幕分辨率動態變化*/
  height: 100rpx;
  border: 1px solid #fff;
}

效果图二：

ok,我们好像理解了什么！！！小程序的View标签类似于一个div，而div是块元素，块元素是占一行的宽度的，flex类似于css的浮动功能，把块元素变成了行内元素，将所有元素都挤到一行去咯。。

好，接下来我们继续实践其它容器属性的用法

我们增加如下一行：

  flex-direction: row;

是的，效果一样。说明了元素的排列方向默认是按行排列（横线排列）。。我们将row换成column，效果则与图一相同（竖向排列）。ok，flex-direction属性就是决定主轴和交叉轴的位置，row是从左到右是主轴，column则是从上到下为主轴，row-creverse是从右到左是主轴，column-reverse是从下到上为主轴。

flex-wrap ： 决定元素如何换行（排列不下时） 可选值：nowrap、row、row-reverse，分别为不换行，换行、反转换行。默认是不换行，无论我们增加多少view的数量，都会默认挤到一行，压缩view的宽度。

justify-content 元素在主轴上的对齐方式 可选值：flex-start、flex-end、center，space-around、space-between,分别为左对齐、右对齐、居中对齐、每个元素两边间隔相等、两端对齐中间每个元素间隔相等；

align-items 元素在交叉轴的对齐方式 可选值：flex-start、flex-end、center，stretch,baseline 分别左对齐、右对齐、居中对齐、当元素没设置高度就会占满容器的高度(主轴是row或row-creverse时)、根据文字的基线对齐。

哈哈，baseline不好理解，于是在举个栗子吧！！
首先，假如有个需求–调整view里面的文字的位置
ok,看代码和效果图

/**index.wxml**/
<view class="container">
  <view class="item">
  1
  </view>
  <view class="item">
  2
  </view>
  <view class="item i3">
  3
  </view>
  <view class="item">
  4
  </view>
</view>
/**index.wxss**/
.container{
  height: 100%;
  width: 100%;
  background-color: cornflowerblue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.item{
  width: 100rpx;/*微信小程序獨有的像素單位，隨屏幕分辨率動態變化*/
  height: 100rpx;
  background-color: fuchsia;
  border: 1px solid #fff;

}

.i3{
  display: flex;
  align-items: flex-end;
}

我们为第三个view添加多一个样式，让它也成为flex容器，并且让它的元素（即文字）的位置在下方。
效果图3：

ok,这时候，如果我们把align-items: flex-start; 改成align-items: baseline;
效果图4：

怎么样？！是不是好理解一些了，，就是按文字基线排列的。。

说完flex容器的属性，我们来研究下flex元素的属性咯！！！！！！！！！！！！！！

flex-grow 当有多余空间时，元素的放大比例；默认元素的大小我们指定宽高后即使容器有多余空间也不会占用容器的空间，即flex-grow: 0，如果我们设置值为1，那么元素就会占用多余空间。

flew-shrink 当空间不足时，元素的缩小比例。默认会缩小值为1，0则为不缩小。还可以有其它值，类似压缩权重，按比例压缩。

flew-basis 元素在主轴上占据的空间，指定具体的大小咯。rpx好像不起效，px可以。

order 定义元素的排列顺序，值是索引值，从1开始。

align-self 定义元素自身的对齐方式（这个属性会覆盖容器的justify-content和align-items属性的作用）。。。这个我测试好像不起效果，原因可能是container容器没有充满页面？？？？！！！！！

相对定位和绝对定位

相对定位的元素是相对自身左上角进行定位，参照物是自己；
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位；

明明flex布局很牛逼，为啥还要学这个！！！！？？？
因为有一种情况，两个元素之间如果需要重叠和覆盖！！！flex布局是做不到的呀！！！

举个相对定位的栗子！

<!--index.wxml-->
<view class="container">
  <view class="item">
  1
  </view>
  <view class="item">
  2
  </view>
  <view class="item i3">
  3
  </view>
  <view class="item">
  4
  </view>
</view>
/**index.wxss**/
.container{

  width: 100%;  
  height: 100%;
  background-color: cornflowerblue;
  display: flex;
  flex-direction: column;
}
.item{
  width: 100rpx;/*微信小程序獨有的像素單位，隨屏幕分辨率動態變化*/
  height: 100rpx;
  background-color: fuchsia;
  border: 1px solid #fff;

}
.i3{
  position: relative;
  left: 130rpx;
  top:30rpx;
}

效果图5：

举个绝对定位的栗子！

<!--index.wxml-->
<view class="container">
  <view class="item">
  1
  </view>
  <view class="item">
  2
  </view>
  <view class="item i3">
  3
  </view>
  <view class="item">
  4
  </view>
</view>
/**index.wxss**/
.container{

  width: 100%;  
  height: 100%;
  background-color: cornflowerblue;
  display: flex;
  flex-direction: column;
}

.item{
  width: 100rpx;/*微信小程序獨有的像素單位，隨屏幕分辨率動態變化*/
  height: 100rpx;
  background-color: fuchsia;
  border: 1px solid #fff;

}

.i3{
  position: absolute;
  left: 130rpx;
  top:30rpx;
}

效果图6：

ok，用法都是很简单的，只需要在具体的元素里设置position属性，指定是relative或absolute即可。