css-flex 常見面試題

廢話很少說！

flex-內容寬度等分

//css
       .box {
            display: flex;
        }
        
        .box div {
            flex: 1;
            border: 1px solid red;
        }
//html
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
複製代碼

左右佈局，一側定寬，一側自適應撐滿

//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;
        }
        
        .right {
            width: 100%;
        }

//html
    <div class="main">
        <div class="left">固定寬度300px</div>
        <div class="right">自適應寬度</div>
    </div>

複製代碼

未知高寬上下左右居中

//css
        html,
        body {
            height: 100%
        }
        
        .main {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center
        }
        
        .box {
            width: 300px;
            border: 1px solid red;
        }
    
    //html
     <div class="main">
        <div class="box">未知高度上下左右居中</div>
    </div>
複製代碼

這個效果就不展現了，能夠作到未知寬高，和已知寬未知高的居中效果。