ul li实现多行多列的布局思路

最新推荐文章于 2025-05-11 16:52:33 发布

原创最新推荐文章于 2025-05-11 16:52:33 发布 · 5.7k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文分享了如何使用CSS flex布局实现京东官网类似模块，通过flex-flow属性控制换行，固定li宽度实现每行3列，详细解析了布局技巧和优化方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近呢在练手css布局，之前在工作中，也会经常遇到这种多行多列的布局，其实css实现的路径挺多的，如下图式的布局一般多是ul li来实现，在此我想写一下我自己的实现思路：
在这里插入图片描述
上图式京东官网上的一个模块

<div class="icon">
	  <ul>
	      <li>
	          <img src="./icon/1.png" alt="">
	          <span>
	             话费 
	          </span>
	      </li>
	      <li>
	          <img src="./icon/2.png" alt="">
	          <span>
	              机票
	          </span>
	      </li>
	      <li>
	          <img src="./icon/3.png" alt="">
	          <span>
	              酒店
	          </span>
	      </li>
	      <li>
	          <img src="./icon/4.png" alt="">
	          <span>
	              游戏
	          </span>
	      </li>
	      <li>
	          <img src="./icon/5.png" alt="">
	          <span>
	              加油卡
	          </span>
	      </li>
	      <li>
	          <img src="./icon/6.png" alt="">
	          <span>
	              火车票
	          </span>
	      </li>
	      <li>
	          <img src="./icon/7.png" alt="">
	          <span>
	              众筹
	          </span>
	      </li>
	      <li>
	          <img src="./icon/8.png" alt="">
	          <span>
	              理财
	          </span>
	      </li>
	      <li>
	          <img src="./icon/9.png" alt="">
	          <span>
	              白条
	          </span>
	      </li>
	      <li>
	          <img src="./icon/10.png" alt="">
	          <span>
	              电影票
	          </span>
	      </li>
	      <li>
	          <img src="./icon/11.png" alt="">
	          <span>
	              企业购
	          </span>
	      </li>
	      <li>
	          <img src="./icon/12.png" alt="">
	          <span>
	              礼品卡
	          </span>
	      </li>
	  </ul>
	</div>

css代码：

.icon {
    width:130px;
    margin-top:15px;
   ul {
       display:flex;
        width:130px;
        list-style-type: none;
        flex-flow: wrap;
       li {
           align-items:center;
           width:40px;
           margin-bottom:10px;
           img {
               width:28px;
               height:28px;
               display: block;
           }
           span {
                font-size:8px;
            }
       }
   } 
}

12张图片，12个li标签，首先给ul加上display：flex属性，目的是将原始的列排布形式改为行排列（list-style-type: none;是用来去除圆点的，此处不多赘述）
在这里插入图片描述
到这一步，咱们还缺两个大的效果：
（1）换行
这里有个认识误区：当内容数量超过了盒子的规定宽度的时候，内容是不会自动换行的，只会一直往外排，超过盒子。所以咱们得手动给盒子添加一个属性：flex-flow: wrap;当内容超过盒子宽度时，内容会自动换行
在这里插入图片描述
（2）每行三个：这里我第一次是这样做的：每个li标签由内容去撑开，只需给每个li标签加个margin-right去控制，但是底下文字的数量有的是3个，有的是2个，不是很好调。