h5学习笔记：flexspace-between实现左右对齐布局
今天在尝试拼⼩程序界⾯的时候⼀直想换种⼝味。于是想使⽤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>
对⾥⾯⼦元素添加样式，其中 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;
flex布局对齐方式
}
继续 将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>
/
* 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;
}
运⾏后，如下图。。可以看到两个ui-box-item 红⾊⽅块能够产⽣空隙实现左右对齐的效果。⽽经过添加⼀个⽂本后，同样左边的⽂本也能够实现这种左右布局的⽅式。看起来⾮常⽅便。只要有2个元素即可很快实现⾥⾯的左右对齐⽅式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。