flex布局一行显示多个

最新推荐文章于 2025-02-23 22:03:16 发布

原创最新推荐文章于 2025-02-23 22:03:16 发布 · 1w 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #flex

本文详细介绍了如何使用flex布局实现网页中一行显示四个元素，当超过四个时自动换行。通过CSS简写属性和calc()函数，轻松控制每个元素的间距和布局。

部署运行你感兴趣的模型镜像

在前端开发的时候，对页面布局的时候，经常遇到固定的一行显示多个，这个经常遇到，所以我想做个记录，等到下次遇到的时候，可以直接拿来使用。

flex布局之一行显示4个，如果多于4个，自动换行，代码如下

<div style="display: flex; justify-content: space-between; flex-wrap: wrap; ">
        <div class="item" style="background-color: aliceblue;"></div>
        <div class="item" style="background-color: antiquewhite;"></div>
        <div class="item" style="background-color: aqua;"></div>
        <div class="item" style="background-color: black;"></div>
        <div class="item" style="background-color: blueviolet;"></div>
        <div class="item" style="background-color: chartreuse;"></div>
        <div class="item" style="background-color: crimson;"></div>
    </div>

    <style>
        .item{
          color: black;
          flex: 0 0 24%; 
          height: 30px; 
          text-align:center;
          line-height:30px;
          background-color: white;
          /* 边距懒得算，css函数代替 */ 
          margin-right: calc(4% / 3); 
          margin-bottom: calc(4% / 3); 
        } 
        /* 去除每行尾的多余边距 */
        .item:nth-child(4n){ 
          margin-right: 0; 
        } 
        /* 使最后一个元素的边距填满剩余空间 */
        .item:last-child{ 
          margin-right: auto; 
        } 
    
    </style>

效果图：
在这里插入图片描述