flex佈局實踐

時間 2021-08-15 標籤 flex 實例實踐

這篇文章記錄自己在實踐flex的過程。需要有flex的基礎知識。

1.居中佈局

效果：

代碼：

<!DOCTYPE html>
<!--lsx study flex 20190110-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background-color: beige;
				margin: 0px;
				padding: 0px;
			}
			.box{
				display: flex;
				width: 100%;
				height: 100%;
				background-color: aliceblue;
				flex-direction: column;
			}
			.context{
				height: 100%;
				background-color: crimson;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.bottom-info{
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="context">
				<div style="width: 200px;height: 200px;background-color: chartreuse;"></div>
			</div>
			<div class="bottom-info">
				<div style="text-align: center;">corpright</div>
				<div  style="text-align: center;">2018C</div>
			</div>
		</div>
	</body>
</html>

2.web後臺典型佈局，聖盃模型

效果圖：

代碼：

<!DOCTYPE html>
<!--lsx study flex 20190110-->
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				background-color: beige;
				margin: 0px;
				padding: 0px;
			}
			
			.box {
				display: flex;
				height: 100%;
				flex-direction: column;
			}
			
			.head {
				height: 60px;
				background-color: aqua
			}
			
			.context {
				height: 100%;
				height: 100%;
				background-color: #F0F8FF;
				display: flex;
				flex-direction: row;
				overflow: hidden;
			}
			
			.buttom {
				height: 50px;
				background-color: #00FFFF
			}
			
			.left {
				width: 80px;
				background-color: #D2691E
			}
			
			.center {
				width: 100%;
				background-color: #DC143C;
				overflow:auto;
			}
			
			.right {
				width: 80px;
				background-color: #D2691E
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="head">頭部</div>
			<div class="context">
				<div class="left">左部</div>
				<div class="center">中部<img style="width: 2000px;height: 2000px;"/></div>
				<div class="right">右部</div>
			</div>
			<div class="buttom">底部</div>
		</div>
	</body>

</html>

3.item佈局

效果：

代碼：

<!DOCTYPE html>
<!--lsx study flex 20190110-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.item{
				display: flex;
				height: 60px;
				background-color: bisque;
				margin-bottom: 10px;
			}
			.item-image{
				width: 60px;
				height: 60px;
				/*固定佈局*/
				flex-basis: 60px;
			}
			.item-context{
				background-color: aquamarine;
				/*放大*/
				flex-grow:1;
				/*容器佈局爲flex*/
				display: flex;
				flex-direction: column;
			}
			.item-context-title{
				flex-grow:0;
				background-color: beige;
				width: 200px;
			}
			.item-context-detail{
				flex-grow:0;
				background-color: chocolate;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="item">
			<div class="item-image">
				<img src="img/60x60.gif" />
			</div>
			<div class="item-context">
				<div class="item-context-title">買一送一個的電視機</div>
				<div class="item-context-detail">詳情</div>
			</div>
		</div>
		<div class="item">
			<div class="item-image">
				<img src="img/60x60.gif" />
			</div>
			<div class="item-context">
				<div class="item-context-detail">詳情</div>
				<div class="item-context-title">買一送一個的電視機</div>
			</div>
		</div>
	</body>
</html>