接上次视图容器组建详解(一)与(二),我们今天把最后两个组件样式说明一下,顺便贴出一些相关的属性内容。
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 | 弹性项目位于容器基线上 |