这篇文章主要讲解了“小程序中怎么实现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;
}
图片
// 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;
}
图片
// 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
// 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
// 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
// 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
// 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
// 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
属性
| 排列方式(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://chengdu.cdxwcx.cn/article/ieopop.html
