flex实现三栏均分布局

2022-05-09  本文已影响0人  卖手机的程序猿

显示效果

前言

父元素设置: 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结构

css代码

上一篇 下一篇

猜你喜欢

热点阅读