flex常用布局

常用布局

三栏布局

双边固定,中间自适应

CSS:
    .container{
        display:flex;
    }
    .left{
        width:100px;
        height:200px;
    }
    .main{
        height:200px;
        width:100%;

    }
    .right{
        width: 100px;
        height: 200px;
    }
HTML:
 <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>

column布局,三行布局,中间自适应

CSS:
    .container{
        display:flex;
        flex-direction:column;
        height:700px;
    }
    .top{
        width:100px;
        height:200px;
    }
    .main{
        height:100%;
        width:100px;

    }
    .bottom{
        width: 100px;
        height: 200px;
    }
HTML:
 <div class="container">
        <div class="top"></div>
        <div class="main"></div>
        <div class="bottom"></div>
    </div>

这篇好文章是转载于：学新通技术网