flex实现三栏均分布局
2022-05-09 本文已影响0人
卖手机的程序猿
显示效果
![](https://img.haomeiwen.com/i19729771/a4efd31dd21ac2d2.png)
前言
父元素设置: display: flex; flex-wrap: wrap;
子元素设置: width: 32.33%; margin-right: 0.08rem;
子元素设置利用伪类 nth-child(3n),将css margin-right: 0;设置为0li:nth-child(3n){ margin-right: 0; }
ps:nth-child()用法自行脑补
少废话直接上代码
dom结构
![](https://img.haomeiwen.com/i19729771/e6dfc9fcd3ac3f81.png)
css代码
![](https://img.haomeiwen.com/i19729771/01e7806136200099.png)