flex布局中的几个小技巧

朱雀 2023-10-15 21:45 7阅读 0赞

**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即可解决问题：**

![69b1f0364d7c41b49d2cebecd52ddc7f.png][]

![f544b2eda08f41e69aafa2bdbe4a2c1e.png][]

3. **当flex子元素行间距过小时，通过设置flex子元素的padding值，可以增大行距。**

**这是一个非常重要的技巧**

![64ac71b75f994ace9a1b37cfcb1f478c.png][]

![d668c0e7eb3b4d49b1f3bba94c86cd18.png][]

.scroll_left .scr_li .children ul li {
      height: 75px;
      line-height: 75px;
      /* 通过padding撑开商品列表的上下行距 */
      padding: 10px 5px 5px 15px;
      width: 220px; 
    }

[69b1f0364d7c41b49d2cebecd52ddc7f.png]: https://img-blog.csdnimg.cn/69b1f0364d7c41b49d2cebecd52ddc7f.png
[f544b2eda08f41e69aafa2bdbe4a2c1e.png]: https://img-blog.csdnimg.cn/f544b2eda08f41e69aafa2bdbe4a2c1e.png
[64ac71b75f994ace9a1b37cfcb1f478c.png]: https://img-blog.csdnimg.cn/64ac71b75f994ace9a1b37cfcb1f478c.png
[d668c0e7eb3b4d49b1f3bba94c86cd18.png]: https://img-blog.csdnimg.cn/d668c0e7eb3b4d49b1f3bba94c86cd18.png