Flex弹性布局快速上手

Flex布局能轻松实现元素的水平/垂直居中：

    
        .container {
            display: flex;
            justify-content: center;  /* 水平居中 */
            align-items: center;      /* 垂直居中 */
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #42b983;
            color: white;
            text-align: center;
            line-height: 100px;
        }
    


    

        
Flex布局

    



    

响应式布局可结合@media查询，适配不同屏幕尺寸。