码迷,mamicode.com
首页 > 其他好文 > 详细

弹性盒子

时间:2018-04-03 14:35:11      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:play   char   html   nbsp   title   row   isp   image   lex   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/**{
				margin: auto;
				padding: 0;
			}*/
			#a1{
				width: 900px;
				height: 400px;
				border: 1px solid red;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}
			#a2{
				
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			#a3{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			#a4{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="a1">
			
			<div id="a2">
				
			</div>
			<div id="a3">
				
			</div>
			<div id="a4">
				
			</div>
		</div>
	</body>
</html>
技术分享图片

 

弹性盒子

标签:play   char   html   nbsp   title   row   isp   image   lex   

原文地址:https://www.cnblogs.com/hankai2735/p/8707788.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!