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>

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
    <div class="main">
        <div class="left">固定宽度300px</div>
        <div class="right">自适应宽度</div>
    </div>

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
     <div class="main">
        <div class="box">未知高度上下左右居中</div>
    </div>

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