flex容器的align-items设置属性值,交叉轴对齐方式
时间:2019-05-04 来源:小程序工厂
wxml代码如下:
1view>
2view>
3view>
4view>
view>
wxss代码如下:
.container{
width: 100%;
height: 100%;
background-color: #ddd;
display: flex;
/* flex-direction: row ; */
/* flex-wrap: wrap; */
flex-flow: row wrap;
/*主轴上的 对齐方式 */
justify-content: space-between;
/*交叉轴上的对齐方式 */
align-items: flex-end;
background: red;
}
.item{
width: 100rpx;
height: 100rpx;
background-color: #00f;
border: 1rpx solid #fff;
}
效果图如下:(红色背景为flex容器范围)
微信开发工具版本号: v0.20.191900
本文网址:http://www.91bianli.com/weixinxiaochengxu/53026.html