接上次视图容器组建详解(一),我们今天继续来介绍两个组件样式。
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;
}