flex 实现列表浮动流式布局

最新推荐文章于 2024-08-11 11:38:56 发布
我是李大福
最新推荐文章于 2024-08-11 11:38:56 发布
阅读量368
点赞数
分类专栏： html页面文章标签： flex html
本文链接：https://blog.csdn.net/weixin_42708208/article/details/110951276
版权
html页面专栏收录该内容
31 篇文章 0 订阅
订阅专栏
flex 实现列表浮动流式布局

文章目录

flex 实现列表浮动流式布局
- 概述
- - 效果图
  - 代码
概述

小方块是 50*50px,上下左右间距是 10px
margin-left:10px 实现间距，并清除每行第一个元素的 margin-left
效果图

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex 实现列表浮动流式布局</title>
    <style>
        .box1{
            display: flex;
            justify-content: space-around
        }
        .tc{
            text-align: center;
        }
        .par{
            background-color: bisque;
            border:solid 1px salmon;

            display: flex;
            flex-wrap: wrap;
        }
        .par_child{
            height: 50px;
            font-size: 30px;
            background-color: azure;

            display: flex;
            flex:0 0 50px;
            margin-bottom: 10px;
            justify-content: center;
            align-items: center;
        }
        /* 3 列 */
        .column3 .par{
            width: 170px; /* 间距 10px */
        }
        .column3 .par_child:not(:nth-child(3n+1)){
            margin-left: 10px;
        }
        /* 去除最后一行底部的 margin-bottom */
        .column3 .par_child:nth-last-child(1),
        .column3 .par_child:nth-last-child(2),
        .column3 .par_child:nth-last-child(3)
        {
            margin-bottom:0;
        }
        /* 4 列 */
        .column4 .par{
            width: 230px; /* 间距 10px */
        }
        .column4 .par_child:not(:nth-child(4n+1)){
            margin-left: 10px;
        }
        
        /* 去除最后一行底部的 margin-bottom */
        .column4 .par_child:nth-last-child(1),
        .column4 .par_child:nth-last-child(2),
        .column4 .par_child:nth-last-child(3),
        .column4 .par_child:nth-last-child(4)
        {
            margin-bottom:0;
        }
        /* 5 列 */
        .column5 .par{
            width: 290px; /* 间距 10px */
        }
        .column5 .par_child:not(:nth-child(5n+1)){
            margin-left: 10px;
        }
        /* 去除最后一行底部的 margin-bottom */
        .column5 .par_child:nth-last-child(1),
        .column5 .par_child:nth-last-child(2),
        .column5 .par_child:nth-last-child(3),
        .column5 .par_child:nth-last-child(4),
        .column5 .par_child:nth-last-child(5)
        {
            margin-bottom:0;
        }
        /* 6 列 */
        .column6 .par{
            width: 350px; /* 间距 10px, 50*6+10*5 */
        }
        .column6 .par_child:not(:nth-child(6n+1)){
            margin-left: 10px;
        }
        
        /* 去除最后一行底部的 margin-bottom */
        .column6 .par_child:nth-last-child(1),
        .column6 .par_child:nth-last-child(2),
        .column6 .par_child:nth-last-child(3),
        .column6 .par_child:nth-last-child(4),
        .column6 .par_child:nth-last-child(5),
        .column6 .par_child:nth-last-child(6)
        {
            margin-bottom:0;
        }
    </style>
</head>
<body>
    <h1 class="tc">flex 实现列表浮动流式布局</h1>
    <div style="margin:30px auto;width:1400px;">
        <ol>
            <li>小方块是 50*50px,上下左右间距是 10px</li>
            <li>margin-left:10px 实现间距，并清除每行第一个元素的 margin-left</li>
        </ol>
    </div>
     <section class="box1">
        <div class="column3">
            <div class="box">
                <h2>3 列布局，多余0 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
               </div>
            </div>
            <div class="box">
                <h2>3 列布局，多余1 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
               </div>
            </div>
            <div class="box">
                <h2>3 列布局，多余2 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
               </div>
            </div>
            <div class="box">
                <h2>3 列布局，多余3 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
               </div>
            </div>
         </div>
        <div class="column4">
            <div class="box">
                <h2>4 列布局，多余0 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
               </div>
            </div>
            <div class="box">
                <h2>4 列布局，多余1 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
               </div>
            </div>
            <div class="box">
                <h2>4 列布局，多余2 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
               </div>
            </div>
            <div class="box">
                <h2>4 列布局，多余3 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
               </div>
            </div>
            <div class="box">
                <h2>4 列布局，多余4 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
               </div>
            </div>
         </div>
        <div class="column5">
            <div class="box">
                <h2>5 列布局，多余0 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余1 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余2 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余3 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余4 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
               </div>
            </div>
            <div class="box">
                <h2>5 列布局，多余5 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
                   <div class="par_child">10</div>
               </div>
            </div>
           
         </div>
        <div class="column6">
            <div class="box">
                <h2>6 列布局，多余0 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余1 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余2 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余3 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余4 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
                   <div class="par_child">10</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余5 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
                   <div class="par_child">10</div>
                   <div class="par_child">11</div>
               </div>
            </div>
            <div class="box">
                <h2>6 列布局，多余6 个</h2>
               <div class="par">
                   <div class="par_child">1</div>
                   <div class="par_child">2</div>
                   <div class="par_child">3</div>
                   <div class="par_child">4</div>
                   <div class="par_child">5</div>
                   <div class="par_child">6</div>
                   <div class="par_child">7</div>
                   <div class="par_child">8</div>
                   <div class="par_child">9</div>
                   <div class="par_child">10</div>
                   <div class="par_child">11</div>
                   <div class="par_child">12</div>
               </div>
            </div>
         </div>
     </section>
</body>
</html>