前端基础-CSS-弹性盒-折行与行间距

    <style>
        .box{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px  auto;
            display: flex;
            /**
                 * flex-wrap: wrap; 折行显示
                 */
                flex-wrap: wrap;
                
                align-content: space-between;
                /* 
                 子元素内容过多时折行处理，默认是不折行
                flex-wrap: wrap;

                折行后行间距--- 
                align-content:flex-start;（必须是使用了flex-wrap: wrap后，align-content才会生效） 
                flex-start		向起始端紧贴
                flex-end		向末端紧贴
                center			居中紧贴
                space-around	距离环绕
                space-between	两端对齐 */     


        }
        .box span{
            width: 100px;
            height: 100px;
            border: 1px dashed red ;

        }
    </style>

    <div class="box">
        <span>11111</span>
        <span>22222</span>
        <span>333333</span>
        <span>44444</span>
        <span>55555</span>
        <span>66666</span>
        <span>66666</span>
        <span>66666</span>
        <span>66666</span>
        <span>66666</span>
    </div>
    案例
```bash
<style>

            .box{
                width: 300px;
                height: 120px;
                border: 1px solid black;
                margin: 10px auto;
                display: flex;
                flex-wrap: wrap;
            }
            .box div{
                width: 60px;
                height: 60px;
                border: 1px solid red;
                box-sizing: border-box;
                display: flex;
            }
            .box div img{
                width: 40px;
                height: 40px;
                margin: auto;
            }
        </style>
        <div class="box">
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
            </div>

![在这里插入图片描述](https://img-blog.csdnimg.cn/f09a80f332e34b5e809ee9a621f338a8.png#pic_center)