html頁面實現聖盃佈局flex

JavaYao1發表於2020-10-18
HTMLFlex

``

<html>
<head>
	<style>
		div{
			outline: 2px solid;
			margin: 5px;
		}

		/* 以下為整個頁面的佈局 */
		.main{
			display:flex;
			flex-direction: column;

			height:100%;
		}

		.top, .footer{
			height: 50px;
		}

		/* 以下為中間的body佈局 */
		.body{
			flex:1;

			display: flex;	
		}

		.body-main{
			flex: 1;
			background-color: yellow;
		}

		.body-left, .body-right{
			width: 100px;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="top">標題欄</div>
		<div class="body">
			<div class="body-left">左邊導航欄</div>
			<div class="body-main">主內容，自動伸縮</div>
			<div class="body-right">右邊提示欄</div>
		</div>
		<div class="footer">頁尾欄，使用flex佈局</div>
	</div>
</body>
</html>

flex佈局使用的時候，把父容器用 display:flex 設定為flex容器，裡面的3個DIV，把固定大小的2個DIV設定固定的高度、寬度（水平的時候設定寬度，垂直的時候設定高度），把自動伸縮的DIV設定 flex:1 即可。就是這麼簡單。flex-direction: column 設定3個DIV為垂直方向（設定垂直方向的時候需要設定高度為100%），預設是水平方向。

相關文章