微信小程序解决flex布局，最后一行靠左对齐问题

需求：使用flex布局，每行固定三个元素，元素间距自适应，向左对齐

实际效果与代码如下：
wxml

 <view class="con-list"><view class="con-item" wx:for="{{conList}}" wx:key="item" style="background-color: {{item.bgColor}};">{{item.name}}</view></view>

wxss

.con-list{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;margin-top: 100rpx;}
.con-item{width: 30%;height: 100rpx;text-align: center;line-height: 100rpx;color: rgb(83, 74, 74);margin-bottom: 20rpx;}

data:{conList:[{id:1,name:'第一',bgColor:'#D1AFFB',},{id:2,name:'第二',bgColor:'#FFDEB1',},{id:3,name:'第三',bgColor:'#D1AFFB',},{id:4,name:'第四',bgColor:'#FFDEB1',},{id:5,name:'第五',bgColor:'#D1AFFB',},{id:6,name:'第六',bgColor:'#FFDEB1',},{id:7,name:'第七',bgColor:'#FFDEB1',},{id:8,name:'第八',bgColor:'#D1AFFB',},]
}

效果图：

问题：第八的元素靠右了，需要向左对齐
原因：设置了justify-content为space-between，元素自动左右两边对齐了

这时候我们可以给最外层的元素设置个伪元素，宽度为30%（因为设置的每个item的宽度为30%），高度为0，需增加一行以下的wxss代码即可：

.con-list::after{content: '';width: 30%;}

这样，就可以实现想要的效果了，最后效果如下：

微信小程序解决flex布局，最后一行靠左对齐问题相关推荐

微信小程序开发 — Flex布局
前言微信小程序页面布局方式采用的是Flex布局. Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局. Flex布局提供了元素在容器中的对齐,方向以及顺序 ...
微信小程序之 flex 布局最详细讲解！！！
小程序 flex 布局快速入门小程序 flex 布局实现一.view 默认布局 1.1 flex 布局原理 1.2 flex 父项常见属性二.使用 flex 设置水平弹性布局 2.1 Flex ...
微信小程序之Flex布局
目录一.Flex 基本概念二.Flex 容器三.Flex 容器属性 1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content ...
我在学习小程序之flex布局
我在学习小程序之flex布局什么是flex布局呢? flex布局定义 flex布局原理一个小案例需求分析代码实现代码部分效果部分总结什么是flex布局呢? flex布局定义 flex ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题 .json文件中----缺点是固定整个页面 {"navigationBarTitleText": "首页&qu ...
微信小程序沉浸式布局
微信小程序沉浸式布局
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js o ...

微信小程序解决flex布局，最后一行靠左对齐问题

微信小程序解决flex布局，最后一行靠左对齐问题

微信小程序解决flex布局，最后一行靠左对齐问题相关推荐

最新文章

热门文章