《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列

本节书摘来自异步社区《微信小程序开发入门精要》一书中的第2章，第2.8节带边距的水平等间隔排列，作者李宁，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.8　带边距的水平等间隔排列
上一节介绍的space-between是顶格显示的，也就是说，最左边和最右边的view是紧挨着父视图边缘的。当我们想留一定的边距时，需要使用space-around，布局代码如下：

<view class="flex-wrp" style="flex-direction:row;justify-content: space-around"><view class="flex-item bc_green"></view><view class="flex-item bc_red"></view><view class="flex-item bc_blue"></view>
</view>

运行效果如图2-16所示。

▲图2-16　space-around效果
如果发生折行，仍然是每一行的最左侧和最右侧都会距父视图边缘有一定距离，布局代码如下：

  <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;flex-wrap:wrap"><view class="flex-item bc_green"></view><view class="flex-item bc_red"></view><view class="flex-item bc_blue"></view><view class="flex-item bc_green"></view><view class="flex-item bc_red"></view><view class="flex-item bc_green"></view><view class="flex-item bc_blue"></view> </view>

显示效果如图2-17所示。

▲图2-17　折行后的space-around效果

《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列相关推荐

《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门主讲人介绍沁修,葡萄藤技术总监项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结直播录屏版 https://v.qq.com/x/page/n ...
微信小程序开发入门（连载）—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
微信小程序开发入门（连载）—— Hello World
上一篇:微信小程序开发入门(连载)-- 微信公众平台配置 3.1 微信开发者工具前往开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/ ...
微信小程序开发入门（连载）—— 微信公众平台配置
上一篇:微信小程序开发入门(连载)-- 开发前的准备工作登录微信公众平台(https://mp.weixin.qq.com),点击左侧导航栏中的"开发",点击"开发设置 ...
微信小程序开发入门（连载）—— 认识微信小程序
从今天开始,为大家开一门连载课程 --<微信小程序开发入门>. 2011 年,腾讯公司新的即时通讯社交软件微信正式上线,凭借其新颖的设计风格和良好的使用体验,微信很快就获得了大量的用户.据 ...
微信小程序开发入门要学哪些内容
微信小程序开发入门要学哪些内容?微信小程序需要学习的知识点:注册登录.开发工具安装.配置.样式.组件.微信小程序数据渲染.网络请求API.获取用户信息API等,了解开发者工具.原生框架.模板语法.组件 ...
微信小程序开发入门-个人笔记
微信小程序开发下载和安装看网上教程即可,如果遇到一直黑屏打不开,可以换一下32/64位的重新下载安装,看看能不能打开,仍然不行的话,可以使用360软件管家下载,亲测有效哦!附上几个链接:微信小程序- ...

《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列

《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列相关推荐

最新文章

热门文章