flex布局实践 - 爱码网

这篇文章记录自己在实践flex的过程。需要有flex的基础知识。

1.居中布局

效果：

flex布局实践

代码：

<!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后台典型布局，圣杯模型

效果图：

flex布局实践

代码：

<!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布局

效果： flex布局实践

代码：

<!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>