使用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:;padding:;}

.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>