css常见布局（二）

采用flex实现两列，三列等多列的布局

一、两列布局

.main{
            display: flex;
            height: 200px;
        }

        .left{
            width: 100px;
            background-color: #ddd;
            color: #fff;
        }
        .right{
            flex:1;
            background-color: #222;
            color:#fff;
        }
    <div class="main">
        <div class="left">左定宽</div>
        <div class="right">右自适应</div>
    </div>

image.png

二、三列布局

.main{
            display: flex;
            height: 200px;
        }

        .left{
            width: 100px;
            background-color: #ddd;
            color: #fff;
        }
        .middle{
            flex:1;
            background-color: #000;
            color:#fff;
        }
        .right{
            width: 200px;
            background-color: #999;
            color: #fff;
        }
<div class="main">
        <div class="left">左定宽</div>
        <div class="middle">中间自适应</div>
        <div class="right">右定宽</div>
    </div>

image.png