[移动开发]微信小程序-flex弹性布局

display:?flex;/*设置弹性布局*/

align-items:?center;/*?以上下位基准居中*/

justify-items:?center;/*以左右为基准居中*/

如果设置flex的话，后面两个就没有。

而且view本来是上下分的，用了在父view中添加flex模块之后，就会变成横着摆。

（如果要实现自动换行，先设置flex-wrap:?wrap; 然后比如说要设置三个一行，就可以设置width为30%）

底部导航栏：用tabBar，在app.json里面添加

效果图

?

app.json

{
  "pages":[
    "pages/one/one",
    "pages/two/two",
    "pages/three/three",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [
      {
      "pagePath": "pages/one/one",
      "text": "首页",
      "iconPath": "pages/images/hu.png",
      "selectedIconPath": "pages/images/hs.png"
    },
    {
      "pagePath": "pages/two/two",
      "text": "发现",
      "iconPath": "pages/images/fu.png",
      "selectedIconPath": "pages/images/fs.png"
    },
    {
      "pagePath": "pages/three/three",
      "text": "我的",
      "iconPath": "pages/images/mu.png",
      "selectedIconPath": "pages/images/ms.png"
    }
  ]
  }
}

one.wxml

<!--pages/one/one.wxml-->
<view class="pageview">
    <view class="topview">
        嘉然今天吃什么
    </view>

    <view class="midview">
        嘉然今天吃什么
    </view>
</view>

one.wxss

/* pages/one/one.wxss */
.pageview{
width: 100%;
height: 100vh;
}
.topview{
width: 100%;
height: 20vh;
background-color: orange;
display: flex;
align-items: center;/* 以上下位基准居中*/
justify-items: center;/*以左右为基准居中*/
flex-wrap: wrap;
}
.midview{
width: 100%;
height: 60vh;
background-color: pink;
display: flex;
align-items: center;
justify-items: center;
}