小程序中flex兼容性布局参考weui源码

1.example.wxml

<!--pages/usercenter/usercenter.wxml-->
<view class="weui-cells__title">
    带说明的列表项
</view>
<view class="weui-cells">
    <view class="weui-cell">
        <view class="weui-cell__bd">
            <text>标题文字</text>
        </view>
        <view class="weui-cell__ft">
            说明文字
        </view>
    </view>
</view>

2.weui.wxss

.weui-cells{
  margin-top:1.17647059em;
  background-color:#FFFFFF;
  line-height:1.47058824;
  font-size:17px;
  overflow:hidden;
  position:relative;
}
.weui-cells:before{
  content:" ";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:1px;
  border-top:1px solid #e5e5e5;
  color:#e5e5e5;
  -webkit-transform-origin:0 0;
          transform-origin:0 0;
  -webkit-transform:scaleY(0.5);
          transform:scaleY(0.5);
  z-index:2;
}
.weui-cells:after{
  content:" ";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  height:1px;
  border-bottom:1px solid #e5e5e5;
  color:#e5e5e5;
  -webkit-transform-origin:0 100%;
          transform-origin:0 100%;
  -webkit-transform:scaleY(0.5);
          transform:scaleY(0.5);
  z-index:2;
}
.weui-cells__title{
  margin-top:.77em;
  margin-bottom:.3em;
  padding-left:15px;
  padding-right:15px;
  color:#999999;
  font-size:14px;
}
.weui-cells__title + .weui-cells{
  margin-top:0;
}
.weui-cell{
  padding:10px 15px;
  position:relative;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
          align-items:center;
}
.weui-cell:before{
  content:" ";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:1px;
  border-top:1px solid #e5e5e5;
  color:#e5e5e5;
  -webkit-transform-origin:0 0;
          transform-origin:0 0;
  -webkit-transform:scaleY(0.5);
          transform:scaleY(0.5);
  left:15px;
  z-index:2;
}
.weui-cell:first-child:before{
  display:none;
}
.weui-cell__bd{
  -webkit-box-flex:1;
  -webkit-flex:1;
          flex:1;
}
.weui-cell__ft{
  text-align:right;
  color:#999999;
}