h5学习笔记：flex space-between 实现左右对齐布局_h5 间隙 左右对齐

今天在尝试拼小程序界面的时候一直想换种口味。于是想使用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个元素即可很快实现里面的左右对齐方式。