小程序写个行布局

前言

最近在做小程序，被虐的很惨，css属性太多，有些样式要折腾好久才能写出来。。

这次要实现的样式

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;中间撑开，将内容撑向两边；
（2）但是会在发生内容溢出时影响项目的对齐，会错乱，解决办法就是下面给左侧布局设置一个固定高度，右侧布局设置flex：1，这样两个布局会被撑开；
（3）但是布局撑开了，右侧内容是靠在布局的左边的，然后给右边布局设置text-align:right;来让文字靠右；
（4）but又出问题了，在输入英文的时候会不换行，继续撑开导致布局错乱，word-break:break-all;又是一句将英文字母给换行；
（5）换行是换行了，但是行高写固定的80，这样一来文字超出了行高，把行高去掉那么内容少的时候会显得很细，设置一个min-height来保持初始每行都一样，并且不至于显得那么窄不美观。

• 经历了以上的几个过程，终于得到了如图所示的效果，这么折腾啥也别说了，菜是原罪好吧。