不使用 float 完成三欄式布局,我分以下幾步走：
1. 定義出大體的 HTML 結構
<body>
<div>
<div class="left">
<img src="" alt="Team Logo">
<span>Team name</span>
</div>
<div class="middle">
<p>東風夜放花千樹，更吹落慎皱、星如雨。</p>
<p>寶馬雕車香滿路,鳳簫聲動框都，玉壺光轉，一夜魚龍舞呵晨。</p>
<p> 蛾兒雪柳黃金縷魏保，笑語盈盈暗香去熬尺。</p>
<p> 眾里尋他千百度,驀然回首，那人卻在谓罗，燈火闌珊處粱哼。</p>
<p> 沒有糾結，無關愛情妥衣，犯不著低眉瞬目的期期艾艾皂吮，只是極盡盛大的繁華著，跑馬觀花税手，一路精彩蜂筹。
縱情灑脫的走過火樹銀花的日子，尋覓一縷暗香的希望芦倒，驀然回首艺挪，尚在，便持手兵扬。</p>
</div>
<div class="right">
<img src="" alt="Person Logo">
<img src="" alt="Person Logo">
<img src="" alt="Person Logo">
<img src="" alt="Person Logo">
</div>
</div>
</body>
2. 調(diào)節(jié)各 div 背景麻裳、邊框等樣式
body > div {
padding: 20px;
background-color: #eeeeee;
border: 1px solid #999;
}
.left {
width: 200px;
background-color: white;
}
img {
width: 80px;
height: 80px;
background-color: #eeeeee;
margin: 10px 10px;
line-height: 80px; /*為了讓圖片上的替代文字居中*/
}
.middle {
background-color: white;
text-align: left;
padding: 10px;
}
.right {
width: 120px;
background-color: white;
}
效果如下：
設置背景、邊框等樣式
3. 給最大的 div 設置 display:flex;
body > div {
padding: 20px;
background-color: #eeeeee;
border: 1px solid #999;
display: flex;
text-align: center; /*為了讓文字居中*/
}
flex 布局之后
4. 給左右的 div 設置固定寬度器钟；
之前已經(jīng)設置過了津坑。
5. 給中間的 div 設置 flex:1;
.middle {
flex: 1;
background-color: white;
text-align: left;
padding: 10px;
flex 是 flex-grow、flex-shrink傲霸、flex-basis的縮寫疆瑰。
5.1. flex 默認值 0 1 auto; 即
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
5.2. flex 取值為 none; 即
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
5.3. flex 取值為 atuo; 即
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
5.4. flex 取值為 非負數(shù)字; 則該數(shù)字為 flex-grow 值，flex-shrink 取 1昙啄，flex-basis 取 0%穆役，即
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）梳凛。瀏覽器根據(jù)這個屬性耿币，計算主軸是否有多余空間。它的默認值為auto韧拒，即項目的本來大小淹接。
設置中間的 div ： flex:1; 體會與上一張圖的差別
PS : 我還是難以理解這兩張圖不同的原因。初步認為是將其他 div 寬度固定叛溢，給剩下的 div設置 flex:1;可以實現(xiàn)剩下的這個 div 寬度自適應蹈集。
flex-basis 規(guī)定的范圍取決于 box-sizing。這里主要討論以下 flex-basis 的取值情況：
- auto：首先檢索該子元素的主尺寸雇初，如果主尺寸不為 auto，則使用值采取主尺寸之值减响；如果也是 auto靖诗，則使用值為 content郭怪。
- content：指根據(jù)該子元素的內(nèi)容自動布局。有的用戶代理沒有實現(xiàn)取 content 值刊橘，等效的替代方案是 flex-basis 和主尺寸都取 auto鄙才。
- 百分比：根據(jù)其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決于子元素）促绵，則計算結果和設為 auto 一樣攒庵。
參考鏈接:flex設置成1和auto有什么區(qū)別
所以我暫時是這么理解的：
- 如果將 flex 設為 auto ; 或者 不設值 使其為默認值：
左 div : flex-basis: auto ; 值為 200px , 但是 里面的子元素最大占 100px ;
右 div : flex-basis: auto ; 值為 120px, 同上，子元素最大占 100px; - 如果中間 div 的 flex 為 1;
它的 flex-basis: 0%; 即為 0 寬度败晴；才可以分配剩余空間的時候不影響固定寬度的div
5.5 當 flex 取值為一個長度或百分比浓冒，則視為 flex-basis 值，flex-grow 取 1尖坤，flex-shrink 取 1稳懒，有如下等同情況（注意 0% 是一個百分比而不是一個非負數(shù)字）：
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}
5.6 當 flex 取值為兩個非負數(shù)字，則分別視為 flex-grow 和 flex-shrink 的值慢味，flex-basis 取 0%场梆，即
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}
6. 給左右中的 div 設置 height:100%;
.left {
width: 200px;
height: 100%; /* 去掉多余的高度空白* /
background-color: white;
}
.middle {
flex: 1;
margin: 0 20px;
background-color: white;
text-align: left;
padding: 10px;
height: 100%; /* 去掉多余的高度空白* /
}
最終效果
