flex佈局裡的text漢字格式

程式碼放在最後。官方給的程式碼給的點此，我下面結果就是在此基礎之上改的。

我們在微信開發者工具裡，編輯顯示的情況常常出現如下情況：

改後→

<text>標籤在flex佈局中不能居中，尤其是數字：

如果<text>是純文字，顯示就不會是這樣的：

數字與文字混合的顯示呢？看下圖：

我也除錯了很多情況，個人覺得配合字型大小設計flex尺寸，來避難出現這種情況比較穩妥。

然後是文字的居中顯示，如下圖：

文字設定style居中未能顯示，然後一個view標籤：

text-align:center

text-align 屬性規定元素中的文字的水平對齊方式

另外還有其他的屬性，請檢視字型設定（向後面翻一下）。

更改後的顯示如下圖：

下面附程式碼：

.wxml

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green" style='text-align:center'>1</view>
    <view class="flex-item bc_red" style='text-align:center'>222</view>
    <view class="flex-item bc_blue" style='text-align:center'>3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green" style='text-align:center'>純數字111</view>
    <view class="flex-item bc_red">
      <view style='text-align:center'><text >
      此處
      </text></view>
    </view>
    <view class="flex-item bc_blue" style='text-align:center'>3333此處的文字都是漢字</view>
  </view>
</view>
 

.wxss

.page-section{
  margin-bottom: 20rpx;
}
.flex-wrp {display: flex;}
.bc_green {background: skyblue;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}

加油！

有問題再聯絡我。