小程式兩列多行對稱flex佈局
阿新 • • 發佈：2018-12-14
容器
.container-box{
width: 100%;
margin-top: 36rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
專案成員
.item-box{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 1%;
width: 48%;
height: auto;
}
圖
.product-photo{
width: 100%;
height: 335rpx;
background-size: 100% 100%;
border: 1px solid rgba(240,240,240,.8);
background-image:url("http://static.skydaq.cn/uploads/2017/11/07/151005643142166d224f4a20a494c957689a529822730ed04e.jpg")
}
文
.product-text{
margin:30rpx 0 30rpx 20rpx;
font-weight: bold;
align-self: flex-start;
flex: 1 0 auto;
font-size: 32rpx;
color: #292929;
}