flex布局中的几个小技巧

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; 
}