佔滿剩餘網頁寬/高度的美妙解法 - CSS Flexbox
1 | 21,291 |
本篇為 CSS 小雜魚發自內心的驚喜,高手請自行迴避,切忌嘲諷唾棄。
Lag 好幾年才學會,我心中的網頁排版千古難題,原來早有輕鬆解法。「左側選單寬度固定,其餘空間顯示內容」、「選單或工具列置頂,最下方有狀態列,中間所有空間用來顯示內容」是常見的網頁配置需求,可惜我一直不得其法,這些年用過不少怪招 ( margin-left、table,甚至 window.onresize ),雖最後都能交差,但總覺得繞路且不牢靠。之前約略看過 CSS 新推的 flex 排版,貌似強大但有點小複雜,一直沒認真搞懂它(一方面也是擔心 IE 不相容,另一方面是沒找到立即可用的場合)。前陣子寫網頁又遇到佔滿剩餘空間需求,忽然覺得自己該有點長進,加上現在 IE 也全面拉到 IE11,有些新科技可大方拿出來用。研究了一下,flex 真的是這類排版需求最美妙的解法!
CSS Flexbox 已經推出一段時間,網路上教學很多,我就不耍大刀了,大家請自行爬文參考。這裡附上我的主要參考文件:
- 圖解 Flexbox 基本屬性 by 桑莫
- 圖解 Flexbox 進階屬性 by 桑莫
- 详解 flex-grow 与 flex-shrink by xieranmaya
如果你想弄懂縮放比例計算公式,大推這篇 - Flexbox Playground
完整的線上實驗室,可測試不同設定樣式的排版結果
至於 Flexbox 的瀏覽器支援問題,現在只需在意 IE11,依據 Can I Use,IE11 支援但有些 Bug,用在填滿剩餘空間排版這類簡單應用,我實測倒是沒有任何問題。
廢話說完,直接看範例,說明我寫在註解,應該不會太難懂。
範例一、左欄固定寬度,右欄填滿
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>左欄固定寬度,右欄填滿</title>
<style>
html, body {
height: 100%; margin: 0; font-size: 10pt;
font-family: 微軟正黑體, Arial, Helvetica, sans-serif;
}
.content {
display: flex; /* 採用 flex 排版 */
height: 100%; padding: 0;
}
div { padding: 6px; }
.side-menu {
/* 設固定寬度,flex-grow 預設 0,flex-shrink 預設 1 */
/* 設寬度可用 width 或 flex-basis,垂直排列時 flex-basis 代表 height */
width: 150px; background-color: #eee;
}
.main-win {
/* 因 side-menu flex-grow=0,main-win flex-grow=1 吃掉 100% 多餘寬度 */
flex-grow: 1; background-color: lightgray;
}
textarea { width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="content">
<div class="side-menu">
MENU
<ul>
<li>
<a href="#" onclick="display('powderblue')">Blue</a>
</li>
<li>
<a href="#" onclick="display('palevioletred')">Red</a>
</li>
</ul>
</div>
<div class="main-win">
<textarea id="display"></textarea>
</div>
</div>
<script>
function display(color) {
document.getElementById("display").style.backgroundColor = color;
}
</script>
</body>
</html>
範例二、置頂選單 + 內容區塊 + 狀態列,內容填滿剩餘高度
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>置頂選單 + 內容區塊 + 狀態列</title>
<style>
html, body {
height: 100%; margin: 0; font-size: 10pt;
font-family: 微軟正黑體, Arial, Helvetica, sans-serif;
}
.content {
/* flex 直式排列 */
display: flex; flex-direction: column;
height: 100%; padding: 0;
}
div { padding: 6px; }
.top-menu {
height: 25px;
/* 或者寫 flex-basis: 28px 亦可,二者並存 flex-basis 優先 */
background-color: #eee;
}
.main-win {
flex-grow: 1; /* top-menu, status 未設 flex-grow,本列佔用所有剩餘空間 */
background-color: lightgray;
}
.status {
height: 25px; background-color: #bbb;
}
textarea { width: 100%; height: 100%; }
.float > span { float: left; margin-right: 6px; }
</style>
</head>
<body>
<div class="content">
<div class="top-menu">
<div class="float">
<span>MENU</span>
<span>
<a href="#" onclick="display('powderblue', 'Blue')">Blue</a>
</span>
<span>
<a href="#" onclick="display('palevioletred', 'Red')">Red</a>
</span>
</div>
</div>
<div class="main-win">
<textarea id="display"></textarea>
</div>
<div class="status" id="message">
</div>
</div>
<script>
function display(color, msg) {
document.getElementById("display").style.backgroundColor = color;
document.getElementById("message").innerText = msg;
}
</script>
</body>
</html>
範例三、依比例縮放
左欄寬度固定,中間欄吃掉所有多餘寬度,寬度不足時則縮小,右欄不放大,但寬度不足時會縮小。
我寫了一小段 JavaScript 顯示總寬及中、右欄的縮放值,印證公式。
中欄跟右欄的 flex-shrink 值為 2 vs 1,實際縮小比例需乘上基準寬度(flex-basis),故為 80% vs 20%。
完整公式解說可參考這篇
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>依比例縮放</title>
<style>
html, body {
height: 100%; margin: 0; font-size: 10pt;
font-family: 微軟正黑體, Arial, Helvetica, sans-serif;
}
.content {
display: flex; height: 100%; padding: 0;
}
.content>div {
border: 2px solid gray; padding: 6px;
/* 設定 border-box,width 要內含 padding 與 border */
box-sizing: border-box;
}
.col1 {
/* flex-basis 優先於 width 或 height */
flex-basis: 100px; flex-grow: 0; flex-shrink: 0;
}
.col2 {
/* 以下寫法相當於 flex-grow: 1; flex-shrink: 2; flex-basis: 400px; */
flex: 1 2 400px;
}
.col3 { flex: 0 1 200px; }
div { padding: 6px; }
.disp { background-color:teal; color: yellow; height: 1em; }
#totalWidth { position: absolute; bottom: 6px; left: 6px; }
.delta { font-size: 0.8em; color: lightsalmon;}
</style>
</head>
<body>
<div id="totalWidth" class="disp"></div>
<div class="content">
<div class="col1" data-width="100">
<div class="disp"></div>
寬度固定 100px <br/>
flex-grow=0, flex-shrink=0
</div>
<div class="col2" data-width="400">
<div class="disp"></div>
基本寬度 400px <br />
flex-grow=1, flex-shrink=2<br/>
總寬大於 700 時吃掉多出寬度,<br />
小於 700 時吸收 80% 不足寬度 <br />
400 * 2 / (400 * 2 + 200 * 1) = 80%
</div>
<div class="col3" data-width="200">
<div class="disp"></div>
基本寬度 200px <br />
flex-grow=0, flex-shrink=1<br/>
小於 700 時吸收 20% 不足寬度 <br />
200 * 1 / (400 * 2 + 200 * 1) = 20%
</div>
</div>
<script>
function resizeEvent() {
for (var i = 1; i<=3; i++) {
var container = document.querySelector(".col" + i);
var defWidth = container.getAttribute("data-width") * 1;
var currWidth = container.offsetWidth;
var delta = currWidth - defWidth;
var deltaText = "";
if (delta !== 0) deltaText = (delta > 0 ? "放寬" : "縮小") + Math.abs(delta) + "px";
container.querySelector(".disp").innerHTML =
currWidth + "px <span class='delta'>" + deltaText + "</span>";
}
document.getElementById("totalWidth").innerText =
window.document.body.offsetWidth + "px";
}
window.onresize = resizeEvent;
resizeEvent();
</script>
</body>
</html>
This article shows how to use display: flex to implement fixed width/height + remaining space layout.
Comments
# by TLChen
讚喔