1. flex属性一定要写在父级元素的css属性,比如ul里面,不能写到li上面
ul{
display:flex; // flex必须写在父元素ul里面
justify-content:space-between;
height:75px;
li{
height:75px;
line-height:75px;
flex:1;
padding-left:23px;
a{
color:$colorB;
font-size:14px;
img{
width:42px;
height:35px;
vertical-align:middle;
margin-right:15px;
}
}
}
}
2. 当flex子元素横成一排不能换行时,在父元素设置flex-wrap: wrap即可解决问题:
3. 当flex子元素行间距过小时,通过设置flex子元素的padding值,可以增大行距。
这是一个非常重要的技巧
.scroll_left .scr_li .children ul li {
height: 75px;
line-height: 75px;
/* 通过padding撑开商品列表的上下行距 */
padding: 10px 5px 5px 15px;
width: 220px;
}