view节点下如何让其节点下的内容居中显示

在开发微信小程序UI时，安卓一个很简单的cardview内容居中效果，在微信小程序布局时写的比较复杂，这里记录一下：
想实现如下图这样一个效果中，每个item的图表和文字居中显示，怎么实现呢？

image.png

index.wxml中代码如下：

 <view class="items">
  <navigator url="/pages/banner/banner" hover-class="navigator-hover" class="plate-item">
    <view class="item">
      <image src="{{bannerLogoUrl}}"></image>
      <text class="title">轮播图</text>
    </view>
  </navigator>

  <navigator url="/pages/button/button" hover-class="navigator-hover" class="plate-item">
    <view class="item">
      <image src="{{buttonLogoUrl}}"></image>
      <text class="title">按钮</text>
    </view>
  </navigator>

  <navigator url="/pages/dialog/dialog" hover-class="navigator-hover" class="plate-item">
    <view class="item">
      <image src="{{dialogLogoUrl}}"></image>
      <text class="title">对话框</text>
    </view>
  </navigator>
</view>

index.js中定义data，设置图标地址：

Page({
  data:{
    bannerLogoUrl:'/resources/ic_widget_banner.png',
    buttonLogoUrl:'/resources/ic_widget_button.png',
    dialogLogoUrl:'/resources/ic_widget_dialog.png'
  }
})

index.wxss的样式代码如下：

.items{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.plate-item{
  width: 33%;
  height: 100px;
}

.item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-color: chartreuse;
  border-width: 1px;
  background-color: red;
}

.item image{
  width: 30px;
  height: 30px;
}
.title{
  margin-top: 10px;
  
}

每个item中内容居中的关键样式代码是：

.item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-color: chartreuse;
  border-width: 1px;
  background-color: red;
}

display：block

小程序的3个视图容器（view，srcoll-view，swiper）默认值均为display:block

block表示[块内]容器模式，总是使用新行开始显示

display：flex

image.png

• flex-direction属性，有下面4个可选值，默认为row
  • row：水平排列 （默认）
  • row-reverse：水平翻转排列
  • column：竖直排列
  • column-reverse：竖直翻转排列

flex属性值，自动调整各个子组件的宽度，一行排不开会被压缩

如果不想被压缩，就要用到另一个属性flex-wrap，它有3个属性值：

• nowrap（不换行，默认值）
• wrap（换行）
• wrap-reverse（与wrap的效果相反）

对齐方式：align-items和justify-content

只有在display：flex时对齐方式才起作用，如果是display：block则不起作用。

• align-items，子组件在侧轴（竖直）方向上的对齐方式

  • center，侧轴居中（在父组件宽度/高度上的居中，并不是屏幕宽度/高度居中）
  • flex-start，侧轴起始点开始
  • flex-end，侧轴终点开始
  • baseline，效果不明
  • stretch，效果不明

• justify-content，子组件在主轴（水平）方向上的对齐方式

  • center，主轴方向居中（在父组件高度/宽度上的居中，并不是屏幕高度/看宽度居中）
  • flex-start，主轴起始点对齐
  • flex-end，主轴结束点对齐
  • space-between，两端对齐，除了两端的子元素分别靠向两端的容器外，其余子元素之间的间隔都相等。
  • space-around，子元素之间的距离相等，两端子元素距离容器的距离是其它子元素之间的距离的1/2。
  • space-evenly，子元素之间的距离相等，两端子元素距离容器的距离和其它子元素之间的距离相同。

display:none

控制view组件的显示或隐藏值，还有一个属性visibility的hidden值，也能让控件消失，但却会占位置，有一个空白位置，display:none会让组件消失，后面的组件占用他的位置。

image.png