前言

最近在做小程序，被虐的很慘，css屬性太多，有些樣式要折騰好久才能寫出來。。

這次要實現(xiàn)的樣式

image.png

wxml代碼如下（直挑一個子view模板來說）

<view class='topic-row'>
        <view class='row-left'>
          <text wx:if='{{!item.nullable}}' class='red-must-text'>*</text>
          <text>{{item.title}}</text>
        </view>
        <view class='row-right'>
          <text wx:if='{{item.content==null||item.content==undefined}}'>請輸入{{item.title}} ></text>
          <text wx:else>{{item.content}}</text>
        </view>  
</view>

wxss代碼如下：

.topic-row{
  min-height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1rpx #eaeaea
}

.red-must-text{
  color: red;
  margin-right: 10rpx;
}

.row-left{
  width: 200rpx;
}

.row-right{
  flex:1;
  word-break:break-all;
  text-align:right;
}

操作路程（每一步都是解決一個問題）

（1）用的是flex布局， justify-content: space-between;中間撐開，將內(nèi)容撐向兩邊；
（2）但是會在發(fā)生內(nèi)容溢出時影響項目的對齊，會錯亂，解決辦法就是下面給左側(cè)布局設置一個固定高度，右側(cè)布局設置flex：1，這樣兩個布局會被撐開；
（3）但是布局撐開了，右側(cè)內(nèi)容是靠在布局的左邊的，然后給右邊布局設置text-align:right;來讓文字靠右；
（4）but又出問題了，在輸入英文的時候會不換行，繼續(xù)撐開導致布局錯亂，word-break:break-all;又是一句將英文字母給換行；
（5）換行是換行了，但是行高寫固定的80，這樣一來文字超出了行高，把行高去掉那么內(nèi)容少的時候會顯得很細，設置一個min-height來保持初始每行都一樣，并且不至于顯得那么窄不美觀。

• 經(jīng)歷了以上的幾個過程，終于得到了如圖所示的效果，這么折騰啥也別說了，菜是原罪好吧。