前言
最近在做小程序，被虐的很惨，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来保持初始每行都一样，并且不至于显得那么窄不美观。
- 经历了以上的几个过程，终于得到了如图所示的效果，这么折腾啥也别说了，菜是原罪好吧。
