flex布局下两端对齐，不满左对齐
编程小助手
2024-04-02 17:21
短信预约 -IT技能 免费直播动态提醒
解决方案三
最近uni-app开发出现一个页面效果：多行三列左右对齐，超出换行左对齐，网上查了很多都没有能有效解决这个问题，而且这个在手机app上属于比较特殊的情况，UI效果：
我这里就讲自己如何解决这个问题：
首先一个问题考虑到最后一行不满的情况，如果使用左右两端对齐，很明显最后一行，如果是两列呢？例如这个：
此时，就不满足左对齐了！
这个情况是会遇到的。比如，我们用v-for循环渲染内容，后台随机增加标签内容，就无法避免出现上面两端对齐的问题了！
所以考虑到特殊情况作了如下改动，上代码：
<view class="itemBox">
<view class="item">
仪表仪器
</view>
<view class="item">
仪表仪器
</view>
<view class="item">
仪表仪器
</view>
<view class="item">
仪表仪器
</view>
<view class="item">
仪表仪器
</view>
<view class="item">
仪表仪器
</view>
</view>
.itemBox {
width: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item {
width: 32.5%;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background-color: #F2F2F2;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 400;
margin-top: 20rpx;
}
.item:last-child:nth-child(3n - 1) {
margin-right: calc(32.5% + 3% / 3);
}
.item:last-child:nth-child(3n - 2) {
margin-right: calc(65% + 6% / 3);
}
}
最后效果：
很完美的解决了最后一行不满一列、两列不是左对齐的情况！
以上就是flex布局下两端对齐，不满左对齐的详细内容，更多关于flex布局下两端对齐，不满左对齐的资料请关注编程学习网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
