一、flex布局

1、Flex 布局是什么？

　　Flex是Flexible Box的缩写，意味着：灵活布局、弹性布局。

　　任何一个容器均可指定为Flex布局。display:flex;

　　行内元素也可以使用Flex布局。display:inline-flex;

　　采用Flex布局的元素，称为Flex容器，简称容器。

　　它的所有子元素自动成为容器成员，称为Flex项目，简称项目。

　　容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

　　项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2、效果展示

<!--pages/firends.wxml-->
 
<view class="menu">
    <view class="item">
        <image src="/static/hade/1.jpg"></image>
        <text>长颈鹿 </text>
    </view>
  <view class="item">
        <image src="/static/hade/2.jpg"></image>
        <text>大象 </text>
    </view>
  <view class="item">
        <image src="/static/hade/3.jpg"></image>
        <text>烏龜 </text>
    </view>
  <view class="item">
        <image src="/static/hade/4.jpg"></image>
        <text>佩奇 </text>
    </view>
  <view class="item">
        <image src="/static/hade/5.jpg"></image>
        <text>小白兔 </text>
    </view>
</view>

firends.wxml

/* pages/firends.wxss */
image {
  width: 100rpx;
  height: 100rpx;
}

.menu {
  display: flex;
  /* 规定主轴方向 row：水平；*/
  flex-direction: row;
  /* 规定元素在主軸方向展示方式 */
  justify-content: space-around;
  /* 在副轴方向如何展示 */
  /* align-items: flex-end; */
}

.menu .item {
  display: flex;
  /* 规定主轴方向 column：垂直；*/
  flex-direction: column;
  align-items: center;
}

firends.wxss

3、总结

二、flex练习

1、tabbar设置

1.1 添加图片文件夹（存放tabbar图片）

1.2 添加4个page页面，分别是（首页：index，消息：message，购物：cart，用户：myInfo）

1.3 app.json
检查pages项：主要是查看添加的page页是否添加管理到Pages下，
配置tabBar项：selectedColor:设置选中后的文本颜色，list项设置每一个模块的配置，
修改window项：设置标题

{
  "pages": [
    "pages/index/index",
    "pages/message/message",
    "pages/shopping/shopping",
    "pages/myInfo/myInfo",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "逃宝",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#FFCC33",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabbar/shouye.png",
        "selectedIconPath": "/static/tabbar/shouyefill.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/static/tabbar/xinxi.png",
        "selectedIconPath": "/static/tabbar/xinxifill.png"
      },
      {
        "pagePath": "pages/shopping/shopping",
        "text": "购物",
        "iconPath": "/static/tabbar/cart.png",
        "selectedIconPath": "/static/tabbar/cart_hover.png"
      },
      {
        "pagePath": "pages/myInfo/myInfo",
        "text": "用户",
        "iconPath": "/static/tabbar/yonghu.png",
        "selectedIconPath": "/static/tabbar/yonghufill.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.json

斑马斑马-11-微信小程序-布局谋篇