不使用 float 完成三欄式布局,我分以下幾步走：
1. 定義出大體的 HTML 結(jié)構(gòu)
<body>
<div>
<div class="left">
<img src="" alt="Team Logo">
<span>Team name</span>
</div>
<div class="middle">
<p>東風(fēng)夜放花千樹，更吹落、星如雨。</p>
<p>寶馬雕車香滿路,鳳簫聲動，玉壺光轉(zhuǎn)，一夜魚龍舞。</p>
<p> 蛾兒雪柳黃金縷，笑語盈盈暗香去。</p>
<p> 眾里尋他千百度,驀然回首，那人卻在，燈火闌珊處。</p>
<p> 沒有糾結(jié)，無關(guān)愛情，犯不著低眉瞬目的期期艾艾，只是極盡盛大的繁華著，跑馬觀花，一路精彩。
縱情灑脫的走過火樹銀花的日子，尋覓一縷暗香的希望，驀然回首，尚在，便持手。</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;
}
效果如下：
設(shè)置背景、邊框等樣式
3. 給最大的 div 設(shè)置 display:flex;
body > div {
padding: 20px;
background-color: #eeeeee;
border: 1px solid #999;
display: flex;
text-align: center; /*為了讓文字居中*/
}
flex 布局之后
4. 給左右的 div 設(shè)置固定寬度；
之前已經(jīng)設(shè)置過了。
5. 給中間的 div 設(shè)置 flex:1;
.middle {
flex: 1;
background-color: white;
text-align: left;
padding: 10px;
flex 是 flex-grow、flex-shrink、flex-basis的縮寫。
5.1. flex 默認(rèn)值 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ù)這個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。
設(shè)置中間的 div ： flex:1; 體會與上一張圖的差別
PS : 我還是難以理解這兩張圖不同的原因。初步認(rèn)為是將其他 div 寬度固定，給剩下的 div設(shè)置 flex:1;可以實現(xiàn)剩下的這個 div 寬度自適應(yīng)。
flex-basis 規(guī)定的范圍取決于 box-sizing。這里主要討論以下 flex-basis 的取值情況：
- auto：首先檢索該子元素的主尺寸，如果主尺寸不為 auto，則使用值采取主尺寸之值；如果也是 auto，則使用值為 content。
- content：指根據(jù)該子元素的內(nèi)容自動布局。有的用戶代理沒有實現(xiàn)取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
- 百分比：根據(jù)其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決于子元素），則計算結(jié)果和設(shè)為 auto 一樣。
參考鏈接:flex設(shè)置成1和auto有什么區(qū)別
所以我暫時是這么理解的：
- 如果將 flex 設(shè)為 auto ; 或者 不設(shè)值 使其為默認(rèn)值：
左 div : flex-basis: auto ; 值為 200px , 但是 里面的子元素最大占 100px ;
右 div : flex-basis: auto ; 值為 120px, 同上，子元素最大占 100px; - 如果中間 div 的 flex 為 1;
它的 flex-basis: 0%; 即為 0 寬度；才可以分配剩余空間的時候不影響固定寬度的div
5.5 當(dāng) 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 當(dāng) 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 設(shè)置 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%; /* 去掉多余的高度空白* /
}
最終效果
