视图容器
常用的样式的属性:
详情:http://www.jianshu.com/p/f82262002f8a
- display :显示的模式。可选项有:flex(代表view可以伸缩,弹性布局)…
- flex-direction :view容器主轴布局方向。可选项有:row , column
- justify-content :view容器子元素沿着主轴的排列方式。可选项有:flex-start、center、flex-end、space-around…
- align-items :view容器子子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。可选项有:flex-start、center、flex-end…
- flex :权重。可选项:1,2, 3, 4, 5…(flex与display属性一般结合使用,单独使用flex无效)
默认布局
<View >
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
</View>
水平布局
view.wxml添加代码:
<View class="view-content1">
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
</View>
view.wxss 添加样式代码:
.view-content1{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
竖直布局
view.wxml 引用样式
<View class="view-content4">
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
<image style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
</View>
view.wxss 添加样式
.view-content4{
display: flex;
flex-direction: column;
align-items: center;
}
权重布局
view.wxml添加代码
<View class="view-content6">
<image class="flex3" style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
<image class="flex2" style="width:80px;height:80px" src="http://avatar.csdn.net/A/2/3/1_u012987546.jpg" > </image>
</View>
view.wxss添加样式代码:
.view-content6{
display: flex;
}
.flex5{
flex: 5;
}
.flex4{
flex: 4;
}
.flex3{
flex: 3;
}
.flex2{
flex:2;
}
.flex1{
flex: 1;
}