- flex: 1
根据空间填充
.weui-flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.weui-flex__item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
-
上下居中
align-items: center;
微信小程序例子：
test.wxml
<view class="container">
<view class="item">
this is item
</view>
</view>
test.wxss
.container {
display: flex;
background: grey;
align-items: center;
height: 300rpx;
}
.item {
height: 100rpx;
background: orange;
}
-
左右填充整个空间
.item {
flex: 1;
background: orange;
}
-
元素左右居中对齐
justify-content: center;
