今天在尝试拼小程序界面的时候一直想换种口味。于是想使用flex布局，小程序支持flex也比较好。今天遇到一个问题就是要实现一个一左，一右，方式布局。之前习惯了用绝对布局的方式，可以将右边的元素实现right 0 处理。细心想了一既然使用flex布局肯定可以实现。找了一些资料看，space-between 在两个子元素下 可以实现左右对齐的效果。
下面，看一下实现。创建小程序页面，对文件编写如下的方式。
在一个view 里面 包了两个子元素。
<view class='ui-group'> <view class='ui-box-item'></view> <view class='ui-box-item'></view> </view>1234
对里面子元素添加样式，其中 justify-content: space-between; 这行能够起到左右对齐方式。
.ui-group{ display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 20rpx 20rpx; border: 1px solid red; } .ui-box-item{ background: #ff0000; width:200rpx; height:200rpx; }1234567891011121314
继续 将view 添加一个文本，作为对比效果进行查看。
<!--pages/share/share.wxml--> <view class='ui-group'> <view class='ui-box-item'></view> <view class='ui-box-item'></view> </view> <view class='ui-group'> <view class='ui-box-item'></view> <view class='ui-label'>一起砍价2元</view> </view> 1234567891011
/* pages/share/share.wxss */ .ui-group{ display: flex; flex-flow: row nowrap; justify-content: space-between; padding: 20rpx 20rpx; border: 1px solid red; } .ui-box-item{ background: #ff0000; width:200rpx; height:200rpx; } .ui-label{ height: 200rpx; line-height: 200rpx; }
12345678910111213141516171819202122运行后，如下图。。可以看到两个ui-box-item 红色方块能够产生空隙实现左右对齐的效果。而经过添加一个文本后，同样左边的文本也能够实现这种左右布局的方式。看起来非常方便。只要有2个元素即可很快实现里面的左右对齐方式。
