微信小程序开发技术教程：视图容器组件详解（二）
2018-12-28 17:22:06
接上次视图容器组建详解（一），我们今天继续来介绍两个组件样式。
1、视图样式justify-content: flex-start
效果图：
WXML代码如下：
<view class="flex-wrp flex-start">
<view style="background: red"></view>
<view style="background: green"></view>
<view style="background: blue"></view>
</view>
WXSS代码如下：
.flex-start{
flex-direction:row;
justify-content: flex-start;
}
.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: flex-end
WXML代码如下：
<view class="flex-wrp flex-end">
<view style="background: red"></view>
<view style="background: green"></view>
<view style="background: blue"></view>
</view>
WXSS代码如下：
.flex-end{
flex-direction:row;
justify-content: flex-end;
}
.flex-wrp{
height: 100px;
display:flex;
background-color: #FFFFFF;
}
.flex-item{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.green{
background: green;
}
.blue{
background: blue;
}