通过css3中的flex布局,实现一个流式布局:每行的项目数固定为4个块,然后会自动进行分行。分两种情况:一种有左右间距,一种没有。

1、左右有间距的效果

  • 效果

    效果图

  • 代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>flex-flow</title>
        <style>
    *{margin: 0;padding: 0}
    .outer{
        display: flex;
        flex-flow: row wrap;
    }
    .outer .block{
        box-sizing: border-box;
        flex: 0 0 25%;
        height: 50px;
        padding: 10px 20px 10px 0; 
    }
    .outer .block:nth-child(4n){
        padding-right: 0
    }
    .outer span{
        box-sizing: border-box;
        display: inline-block; 
        width: 100%;
        border: 1px solid red;
    }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="block"><span>div1</span></div>
            <div class="block"><span>div2</span></div>
            <div class="block"><span>div3</span></div>
            <div class="block"><span>div4</span></div>
            <div class="block"><span>div5</span></div>
            <div class="block"><span>div6</span></div>
            <div class="block"><span>div7</span></div>
        </div>
          
    </body>
    </html>
    
  • 实例

2、左右没有间距

  • 效果

    效果图

  • 代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
        *{margin: 0;padding: 0}
        .outer{
            display: flex;
            flex-flow: row wrap;
        }
        .outer div{
            box-sizing: border-box;
            flex: 0 0 25%;
            height: 50px;
            border: 1px solid red;
            padding:10px;
        }
        </style>
    </head>
    <body>
        <div class="outer">
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
            <div>div4</div>
            <div>div5</div>
            <div>div6</div>
            <div>div7</div>
        </div>
    </body>
    </html>
    
  • 实例】​​

以上文章来自:黄卉 , https://huanghui8030.github.io/css/flex.html