Wechat applet 03 - text is displayed from left to right, and the block elements in the line are centered

  Effect display

  Implementation process

 WXML file ：

<view class="doctor">
  <view class="doctor-tit">
    <view class="left-tit"> Doctor's recommendation </view>
    <view class="right-tit"> To view more ></view>
  </view>
  <view class="doctor-list">
    <view class="list">
      <image class="doctor-pic" src="../../images/center.png"></image>
      <view class="doctor-name"> Doctor Zhao </view>
    </view>
    <view class="list">
      <image class="doctor-pic" src="../../images/center.png"></image>
      <view class="doctor-name"> Doctor Chen </view>
    </view>
    <view class="list">
      <image class="doctor-pic" src="../../images/center.png"></image>
      <view class="doctor-name"> Doctor Liu </view>
    </view>
  </view>
</view>

WXSS style ：

01 The text is displayed on the left and right

     display: flex;
     justify-content: space-between;

02 The box is centered

     display : flex;
     justify-content : space-around;

/*  Doctor's recommendation  */
.doctor-tit {
  height: 20px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.left-tit {
  font-size: 14pt;
  text-align: justify;
}
.right-tit {
  margin-top: 5px;
  font-size: 10pt;
  color: #b2b2b2;
}
.doctor-list {
  display : flex;
  width: 100%;
  background-color: #fff;
  justify-content : space-around;
}
.list {
  width: 30%;
  height: 150px;
  border: 1px solid red;
  text-align: center;
}
.list .doctor-pic {
  width: 100%;
  height: 120px;
}
.list .doctor-name {
  font-size: 12pt;
}