今天在尝试拼小程序界面的时候一直想换种口味。于是想使用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>
- 1
- 2
- 3
- 4
对里面子元素添加样式，其中 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; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
继续 将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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
/* 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; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
运行后，如下图。。可以看到两个ui-box-item 红色方块能够产生空隙实现左右对齐的效果。而经过添加一个文本后，同样左边的文本也能够实现这种左右布局的方式。看起来非常方便。只要有2个元素即可很快实现里面的左右对齐方式。
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow