使用display:flex;实现两栏布局和三栏布局

一、使用display:flex;实现两栏布局

body,div{margin:0px;padding:0px;}
.flex-container{display:flex;height:300px;}
.item{padding:6px;}
.item1{flex:0 0 auto;background-color:#999;width:200px;}
.item2{flex:1 1 auto;background-color:#484;}

<div class="flex-container">
        <div class="item item1">这是左侧内容</div>
        <div class="item item2">这是右侧内容</div>
</div>

 

二、使用display:flex;实现三栏布局

body,div{margin:0;padding:0;}
.flex-container{display:flex;height:300px;}
.item{padding:5px;width:200px;}
.item1,.item3{flex:0 0 auto;background-color:#372;}
.item2{flex:1 1 auto;background-color:#efe;}

<div class="flex-container">
        <div class="item item1">这是左侧内容</div>
        <div class="item item2">这是中间内容</div>
        <div class="item item3">这是右侧内容</div>
</div>