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

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: