用弹性盒子实现圣杯布局

最新推荐文章于 2024-03-09 19:40:41 发布

Pumpkin~

最新推荐文章于 2024-03-09 19:40:41 发布

阅读量731

点赞数

分类专栏： css，css3

本文链接：https://blog.csdn.net/qq_37635519/article/details/90266079

版权

css，css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

  <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title></title>
 	<link rel="stylesheet" href="">
 	<style type="text/css" media="screen">
 		*{
 			margin: 0px;
 			padding:0px;
 		}
 	.wrap{
 		width:400px;
 		height:400px;
 		border:1px solid black;
 		margin:0 auto;
 		display: flex;
 		resize:both;/*注意：resize适用于：所有 <' overflow '> 设置为非visible的元素*/
 		overflow: hidden;
 		flex-direction: column;
 	 
 	}
  


  	.head,
  	.footer,
  	.left,
  	.right
  	{
  		 
  		flex:0 0 20%;
  		border:1px solid black;
  		box-sizing: border-box;
  	}
  	.contain{
  		 

  		flex:1 1 auto;
  		display: flex;
  	}
  	  
  	.center{
  		flex:1 1 auto;
  	}
 	</style>
 </head>
 <body>
 	<div class="wrap">
 		 <div class="head">head</div>
 		 <div class="contain">
 		 	<div class="left">left</div>
 		 	<div class="center">center</div>
 		 	<div class="right">right</div>
 		 </div>
 		 <div class="footer">footer</div>
 	</div>
 </body>
 </html>

在这里插入图片描述

Pumpkin~

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用弹性盒子实现圣杯布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="styleshee...
复制链接

扫一扫