重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

小程序中怎么实现view视图容器

这篇文章主要讲解了“小程序中怎么实现view视图容器”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序中怎么实现view视图容器”吧!

创新互联建站专注于桑植企业网站建设,响应式网站建设,购物商城网站建设。桑植网站建设公司,为桑植等地区提供建站服务。全流程按需求定制开发,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务

视图容器

// wxml

 flex-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;
}

小程序中怎么实现view视图容器

图片

// wxml

 flex-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;
}

小程序中怎么实现view视图容器

图片

// wxml

 justify-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视图容器

view

// wxml

 justify-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视图容器

view

// wxml

 justify-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视图容器

view

// wxml

 justify-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视图容器

view

// wxml

 justify-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视图容器

view

// wxml

 justify-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视图容器

view

属性

排列方式(flex-direction)描述
row横向排列
column纵向排列
项目内容对齐(justify-content)描述
flex-start向行头紧挨
flex-end向行尾紧挨
center居中紧挨
space-between平均分布
space-around平均分布 ,两边留有一半间隔
space-evenly两边间隔与中间相同

源码

// wxml

 flex-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视图容器这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


网站名称:小程序中怎么实现view视图容器
文章出自:http://cqcxhl.com/article/ieopop.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP