最近在學(xué)習(xí)flex-box的布局，也發(fā)現(xiàn)這個(gè)布局挺好用，在整個(gè)頁面的響應(yīng)式布局方面挺方便。不過在實(shí)踐過程的時(shí)候，在幾個(gè)屬性上面總是有那么點(diǎn)惡心。下面整理了3個(gè)布局。

1, Flex布局第一種運(yùn)用，響應(yīng)式柵格化布局

Html代碼

<div class="demo-wrap">
 <div class="demo">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
    <div class="item"></div>
   <div class="item"></div>
   </div>
</div>

css代碼

.demo-wrap{
 border: 2px solid #ddd;
 background: #f5f5f5;
 padding: 6px;
}
 
.demo{
 width: 100%;
 
 /*flex布局（作用于容器）*/
 display: flex;
 
 /*兩端對齊（作用于容器）*/
 justify-content: space-around;
 
 /*側(cè)軸方向?qū)R方式（作用于容器）*/
 align-items: flex-end;
 
 /*換行（作用于容器）*/
 flex-wrap: wrap;
}
 
.demo .item{
 width: 300px;
 height: 50px;
 background: #444;
 margin-bottom: 20px;
}

核心就是最大父容器讓寬度auto,item父容器100%的設(shè)置，再用上一個(gè)換行wrap,就能輕松實(shí)現(xiàn)響應(yīng)式布局

2，左右固定中間自適應(yīng)寬度底部對齊布局

html代碼

<div class="demo">
  <div class="left">左邊固定寬度為100px，這里設(shè)置了高度為auto</div>
  <div class="center">中間寬度自適應(yīng)，并且左中右兩個(gè)區(qū)域是等高的，這里設(shè)置了高度為200px</div>
  <div class="right">右邊固定寬度為150px，這里設(shè)置了高度為auto</div>
</div>

css代碼

.demo{
 /*flex布局（作用于容器）*/
 display: flex;
 
 /*項(xiàng)目拉伸對齊，也就是所左邊的高度為拉伸到和右邊底部對齊*/
 align-items: flex-end;
}
 
.demo .left{
 /*左邊固定寬度，必須設(shè)置其最小寬度和最大寬度*/
 width: 100px;
 min-width: 100px;
 max-width: 100px;
 
 /*高度自由分配*/
 height: auto;
 background: #B4D3F7;
 
 /*空白區(qū)域分配比例為0（作用于項(xiàng)目）*/
 flex-grow: 0;
}
 
.demo .center{
 margin: 0 10px;
 width: auto;
 height: 200px;
 background: #F7E8B4;
 
 /*空白區(qū)域分配比例為1（作用于項(xiàng)目）
 左右得到的空白比例為0:1，所以右邊會(huì)分配到剩余的所有空白區(qū)域，
 左邊成固定的寬度，右邊為自適應(yīng)寬度*/
 flex-grow: 1;
}
 
.demo .right{
 /*右邊固定寬度，必須設(shè)置其最小寬度和最大寬度*/
 width: 150px;
 min-width: 150px;
 max-width: 150px;
 
 /*高度自由分配*/
 height: auto;
 background: #CBFFD2;
 
 /*空白區(qū)域分配比例為0（作用于項(xiàng)目）*/
 flex-grow: 0;
}

這是一種類似于圣杯的簡易布局效果。視覺效果保證的核心的有max-width作保證。布局的核心是兩側(cè)固定width并且flex-grow為0，中間auto并且flex-grow為1

3，懸掛式布局

html代碼

<div class="Media"> 
  <img class="Media-figure" src="" alt=""> 
  <p class="Media-body">...</p>
</div>

css代碼

.Media { display: flex; align-items: flex-start;}
.Media-figure { margin-right: 1em;}
.Media-body { flex: 1;}