微信小程序框架演示
一、容器属性
1.flex-direction的用法
flex-direction.wxml
<view class='title'>1.flex-direction的用法</view>
<view class='myContainer'>
<view class='demo'>云</view>
<view class='demo'>慧</view>
<view class='demo'>智</view>
</view>
flex-direction.wxss
.myContainer {
margin: 80rpx auto;
width: 600rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: column-reverse;
}
.demo {
width: 100px;
height: 100rpx;
line-height: 100rpx;
margin: 15rpx;
text-align: center;
background-color: lightgreen;
}
2.flex-wrap的用法
flex-wrap.wxml
<view class='title'>2.flex-wrap的用法</view>
<view class='myContainer'>
<view class='demo'>工</view>
<view class='demo'>具</view>
<view class='demo'>箱</view>
</view>
flex-wrap.wxss
.myContainer {
margin: 80rpx auto;
width: 600rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.demo {
width: 100px;
height: 100rpx;
line-height: 100rpx;
margin: 15rpx;
text-align: center;
background-color: lightgreen;
}
3.justify-content的用法
justify-content.wxml
<view class='title'>3.justify-content的用法</view>
<view class='myContainer'>
<view class='demo'>智</view>
<view class='demo'>慧</view>
<view class='demo'>云</view>
</view>
justify-content.wxss
.myContainer {
margin: 80rpx auto;
width: 600rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.demo {
width: 50px;
height: 100rpx;
line-height: 100rpx;
border: 1px solid;
text-align: center;
background-color: lightgreen;
}
4.align-items的用法
align-items.wxml
<view class='title'>4.align-items的用法</view>
<view class='myContainer'>
<view class='demo z'>智</view>
<view class='demo h'>慧</view>
<view class='demo y'>云</view>
</view>
align-items.wxss
.myContainer {
margin: 80rpx auto;
width: 600rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.demo {
height: 100rpx;
line-height: 100rpx;
border: 1px solid;
text-align: center;
background-color: lightgreen;
}
.z{
width: 200rpx;
}
.h{
width: 300rpx;
}
.y{
width: 400rpx;
}
5.align-content的用法
align-content.wxml
<view class='title'>5.align-content的用法</view>
<view class='myContainer'>
<view class='demo z'>智</view>
<view class='demo h'>慧</view>
<view class='demo y'>云</view>
<view class='demo g'>工</view>
<view class='demo j'>具</view>
<view class='demo x'>箱</view>
</view>
align-content.wxss
.myContainer {
margin: 80rpx auto;
width: 600rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.demo {
height: 100rpx;
line-height: 100rpx;
border: 1px solid;
text-align: center;
background-color: lightgreen;
}
.z{
width: 200rpx;
}
.h{
width: 300rpx;
}
.y{
width: 400rpx;
}
.g{
width: 200rpx;
}
.j{
width: 300rpx;
}
.x{
width: 400rpx;
}
二、项目属性
1.order的用法
order.wxml
<view class='title'>1.order的用法</view>
<view class='myContainer'>
<view class='demo z'>智</view>
<view class='demo h'>慧</view>
<view class='demo y'>云</view>
</view>
order.wxss
.myContainer {
margin: 80rpx auto;
width: 600rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.demo {
width: 50px;
height: 100rpx;
line-height: 100rpx;
margin: 15rpx;
text-align: center;
background-color: lightgreen;
}
.z{
order: 6;
}
.h{
order: -1;
}
.y{
order: 2
}
2.flex-shrink的用法
flex-shrink.wxml
<view class='title'>2.flex-shrink的用法</view>
<view class='myContainer'>
<view class='demo z'>智</view>
<view class='demo h'>慧</view>
<view class='demo y'>云</view>
<view class='demo g'>工</view>
<view class='demo j'>具</view>
<view class='demo x'>箱</view>
</view>
flex-shrink.wxss
.myContainer {
margin: 80rpx auto;
width: 500rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
}
.demo {
height: 100rpx;
line-height: 100rpx;
border: 1px solid;
text-align: center;
background-color: lightgreen;
}
.z{
width: 200rpx;
flex: 1;
}
.h{
width: 200rpx;
flex: 2;
}
.y{
width: 200rpx;
flex: 3;
}
.g{
width: 200rpx;
flex: 1;
}
.j{
width: 200rpx;
flex: 2;
}
.x{
width: 200rpx;
flex: 3;
}
3.flex-grow的用法
flex-grow.wxml
<view class='title'>3.flex-grow的用法</view>
<view class='myContainer'>
<view class='demo z'>智</view>
<view class='demo h'>慧</view>
<view class='demo y'>云</view>
</view>
flex-grow.wxss
.myContainer {
margin: 80rpx auto;
width: 600rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
}
.demo {
height: 100rpx;
line-height: 100rpx;
border: 1px solid;
text-align: center;
background-color: lightgreen;
}
.z{
width: 100rpx;
flex-grow: 0;
}
.h{
width: 100rpx;
flex-grow: 1;
}
.y{
width: 100rpx;
flex-grow: 2;
}
4.flex-basis的用法
flex-basis.wxml
<view class='title'>4.flex-basis的用法</view>
<view class='myContainer'>
<view class='demo g'>工</view>
<view class='demo j'>具</view>
<view class='demo x'>箱</view>
</view>
flex-basis.wxss
.myContainer {
margin: 80rpx auto;
width: 600rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
}
.demo {
height: 100rpx;
line-height: 100rpx;
border: 1px solid;
text-align: center;
background-color: lightgreen;
}
.g{
width: 100rpx;
flex-grow: 0;
}
.j{
width: 100rpx;
flex-grow: 1;
}
.x{
width: 100rpx;
flex-grow: 2;
}
5.flex-self的用法
flex-self.wxml
<view class='title'>5.align-self的用法</view>
<view class='myContainer'>
<view class='demo y'>云</view>
<view class='demo g'>工</view>
<view class='demo j'>具</view>
<view class='demo x'>箱</view>
</view>
flex-self.wxss
.myContainer {
margin: 80rpx auto;
width: 500rpx;
height: 500rpx;
border: 1px solid silver;
display: flex;
flex-direction: row;
}
.demo {
width: 100rpx;
line-height: 100rpx;
margin: 15rpx;
text-align: center;
background-color: lightgreen;
}
.y {
height: 100rpx;
align-self: flex-start;
}
.g {
height: 100rpx;
align-self: center;
}
.j {
height: 100rpx;
align-self: flex-end;
}
.x {
align-self: stretch;
}
三、推荐小程序(欢迎各位大佬指导)