flex布局，最后一行靠左显示

墨蓝 2023-02-20 10:55 22阅读 0赞

#### flex布局，最后一行靠左显示 ####

// 最后一行靠左显示  
`flex-wrap: wrap;`  
`align-content: flex-start;`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_16_color_FFFFFF_t_70_pic_center]

/* 设置为伸缩盒子 */
           /* display: flex;*/
            /* 设置主轴方向 */
            /* flex-direction: row; */
            /* 竖立显示 */
            /* flex-direction: column; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column-reverse; */
            /* 设置元素在主轴方向对齐方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* 两端对齐,中间自适应 */
            /* justify-content: space-between; */
            /* 环绕对齐 */
            /* justify-content: space-around;   */
            /* 设置元素在侧轴对齐方式 */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
            /* 拉伸 */
            /* align-items: stretch; */
            /* 设置元素是否换行显示 */
            /*flex-wrap: nowrap; */
            flex-wrap: wrap;
            /* 设置元素换行后的对齐方式 */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            /* align-content: space-around; */
            /* 默认值 */
    		/* align-content: stretch; */

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    
        <style type="text/css">
            * { 
                margin: 0;
                padding: 0;
            }
            
            .box { 
                width: 900px;
                height: 580px;
                border: 1px solid red;
                margin: 50px auto;
                /* 设置为伸缩盒子 */
                display: flex;
                /* 设置主轴方向 */
                /* flex-direction: row; */
                /* 竖立显示 */
                /* flex-direction: column; */
                /* flex-direction: row-reverse; */
                /* flex-direction: column-reverse; */
                /* 设置元素在主轴方向对齐方式 */
                /* justify-content: flex-start; */
                /* justify-content: flex-end; */
                /* justify-content: center; */
                /* 两端对齐,中间自适应 */
                /* justify-content: space-between; */
                /* 环绕对齐 */
                /* justify-content: space-around; */
                /* 设置元素在侧轴对齐方式 */
                /* align-items: flex-start; */
                /* align-items: flex-end; */
                /* align-items: center; */
                /* 拉伸 */
                /* align-items: stretch; */
                /* 设置元素是否换行显示 */
                /*flex-wrap: nowrap; */
                flex-wrap: wrap;
                /* 设置元素换行后的对齐方式 */
                /* align-content: flex-start; */
                /* align-content: flex-end; */
                /* align-content: center; */
                /* align-content: space-between; */
                /* align-content: space-around; */
                /* 默认值 */
    			/* align-content: stretch; */
    			
    			align-content: flex-start;
    			
    
    			/* // 最后一行靠左显示 flex-wrap: wrap; align-content: flex-start; */
            }
            
            .one { 
                width: 100px;
                height: 100px;
                background-color: red;
            }
            
            .two { 
                width: 100px;
                height: 100px;
                background-color: green;
            }
            
            .three { 
                width: 100px;
                height: 100px;
                background-color: orange;
            }
        </style>
    </head>
    
    <body>
    
        <div class="box">
    
            <div class="one">1</div>
            <div class="two">2</div>
            <div class="three">3</div>
            <div class="three">3</div>
            <div class="three">3</div>
            <div class="three">3</div>
            <div class="three">3</div>
            <div class="three">3</div>
            <div class="three">9</div>
            <div class="three">10</div>
            <div class="three">11</div>
            <div class="three">12</div>
    
        </div>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200626150207248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU=,size_16,color_FFFFFF,t_70#pic_center