CSS-flex常见面试题

废话不多说！

flex-内容宽度等分

//css
       .box {
            display: flex;
        }
        
        .box div {
            flex: 1;
            border: 1px solid red;
        }
//html
    

        
1
        
2
        
3
    

image.png

左右布局，一侧定宽，一侧自适应撑满

//css
        html,
        body {
            height: 100%
        }
        
        .main {
            display: flex;
            height: 100%;
        }
        
        .left,
        .right {
            height: 100%;
            border: 1px solid red;
            box-sizing: border-box;
        }
        
        .left {
            width: 300px;
            flex: none;
        }
        
        .right {
            width: 100%;
        }

//html
    

        
固定宽度300px
        
自适应宽度
    

image.png

未知高宽上下左右居中

//css
        html,
        body {
            height: 100%
        }
        
        .main {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center
        }
        
        .box {
            width: 300px;
            border: 1px solid red;
        }
    
    //html
     

        
未知高度上下左右居中
    

这个效果就不展示了，可以做到未知宽高，和已知宽未知高的居中效果。