flex布局实践

骑猪看日落 2022-04-25 03:20 160阅读 0赞

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

### 1.居中布局 ###

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTQ5MDUw_size_16_color_FFFFFF_t_70][]

代码：

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

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTQ5MDUw_size_16_color_FFFFFF_t_70 1][]

代码：

<!DOCTYPE html>
    
    <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布局 ###

效果：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTQ5MDUw_size_16_color_FFFFFF_t_70 2][]

代码：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTQ5MDUw_size_16_color_FFFFFF_t_70]: /images/20220210/2439e099ee9c41389a83f9562f1cf9d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTQ5MDUw_size_16_color_FFFFFF_t_70 1]: /images/20220210/dfedf89973b740a6bcde14d8d648c281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTQ5MDUw_size_16_color_FFFFFF_t_70 2]: /images/20220210/45988c9032a74740955ffa2cac691d18.png