微信小程序开发技术教程：视图容器组件详解（三）
2018-12-29 17:21:15
接上次视图容器组建详解（一）与（二），我们今天把最后两个组件样式说明一下，顺便贴出一些相关的属性内容。
1、视图样式justify-content: center
效果图：
WXML代码如下：
<view class="flex-wrp justify-content-center">
<view style="background: red"></view>
<view style="background: green"></view>
<view style="background: blue"></view>
</view>
WXSS代码如下：
.justify-content-center{
flex-direction:row;
justify-content: center;
}
.flex-wrp{
height: 100px;
display:flex;
background-color: #FFFFFF;
}
.flex-item{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.green{
background: green;
}
.blue{
background: blue;
}
2、视图样式justify-content: space-between
效果图：
WXML代码如下：
<view class="flex-wrp space-between">
<view style="background: red"></view>
<view style="background: green"></view>
<view style="background: blue"></view>
</view>
WXSS代码如下：
.space-between{
flex-direction:row;
justify-content: space-between;
}
.flex-wrp{
height: 100px;
display:flex;
background-color: #FFFFFF;
}
.flex-item{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.green{
background: green;
}
.blue{
background: blue;
}
主要的属性：
排列方式（flex-direction），用于wxss要属性：
属性 | 描述 |
row | 横向排列 |
column | 纵向排列 |
弹性项目内容对其（justify-content），用于wxss
属性 | 描述 |
flex-start | 弹性项目向行头紧挨着填充 |
flex-end | 弹性项目向行尾紧挨着填充 |
center | 弹性项目居中紧挨着填充 |
space-between | 弹性项目平均分布在该行上 |
space-around | 弹性项目平均分布在该行上，两边留一半的间隔空间 |
项目在容器内侧轴方位的对齐方式（align-items），用于wxss
属性 | 描述 |
stretch | 默认值，弹性项目被拉伸以适应容器 |
center | 弹性项目位于容器中心 |
flex-start | 弹性项目位于容器开头 |
flex-end | 弹性项目位于容器结尾 |
baseline | 弹性项目位于容器基线上 |