使用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>