重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要讲解了“小程序中怎么实现view视图容器”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序中怎么实现view视图容器”吧!
创新互联建站专注于桑植企业网站建设,响应式网站建设,购物商城网站建设。桑植网站建设公司,为桑植等地区提供建站服务。全流程按需求定制开发,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务
视图容器
// wxmlflex-direction: row 1 2 3
// wxss .flex-wrp_one{ display: flex; flex-direction: row; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
图片
// wxmlflex-direction: column 1 2 3
// wxss .flex-wrp_two{ display: flex; flex-direction: column; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
图片
// wxmljustify-content: flex-start 1 2 3
// wxss .flex-wrp_three{ display: flex; justify-content: flex-start; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxmljustify-content: flex-end 1 2 3
// wxss .flex-wrp_four{ display: flex; justify-content: flex-end; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxmljustify-content: center 1 2 3
// wxss .flex-wrp_five{ display: flex; justify-content: center; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxmljustify-content: space-between 1 2 3
// wxss .flex-wrp_six{ display: flex; justify-content: space-between; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxmljustify-content: space-around 1 2 3
// wxss .flex-wrp_seven{ display: flex; justify-content: space-around; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
// wxmljustify-content: space-evenly 1 2 3
// wxss .flex-wrp_eight{ display: flex; justify-content: space-evenly; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
view
属性
排列方式(flex-direction) | 描述 |
---|---|
row | 横向排列 |
column | 纵向排列 |
项目内容对齐(justify-content) | 描述 |
---|---|
flex-start | 向行头紧挨 |
flex-end | 向行尾紧挨 |
center | 居中紧挨 |
space-between | 平均分布 |
space-around | 平均分布 ,两边留有一半间隔 |
space-evenly | 两边间隔与中间相同 |
源码
// wxmlflex-direction: row 1 2 3 flex-direction: column 1 2 3 justify-content: flex-start 1 2 3 justify-content: flex-end 1 2 3 justify-content: center 1 2 3 justify-content: space-between 1 2 3 justify-content: space-around 1 2 3 justify-content: space-evenly 1 2 3
// wxss .flex-wrp_one{ display: flex; flex-direction: row; } .flex-wrp_two{ display: flex; flex-direction: column; } .flex-wrp_three{ display: flex; justify-content: flex-start; } .flex-wrp_four{ display: flex; justify-content: flex-end; } .flex-wrp_five{ display: flex; justify-content: center; } .flex-wrp_six{ display: flex; justify-content: space-between; } .flex-wrp_seven{ display: flex; justify-content: space-around; } .flex-wrp_eight{ display: flex; justify-content: space-evenly; } .flex-item{ width: 100px; height: 100px; } .bc_green{ background: green; } .bc_red{ background: red; } .bc_blue{ background: blue; }
感谢各位的阅读,以上就是“小程序中怎么实现view视图容器”的内容了,经过本文的学习后,相信大家对小程序中怎么实现view视图容器这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!