这篇文章主要讲解了“小程序中怎么实现view视图容器”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序中怎么实现view视图容器”吧！
创新互联建站是一家专注于
成都做网站、网站设计与策划设计,盐边网站建设哪家好?
创新互联建站做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:盐边等地区。盐边做网站价格咨询:18980820575
视图容器
// 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://cdxtjz.cn/article/dhgjsg.html
