CSS3项目属性

最新推荐文章于 2024-09-29 21:43:16 发布

Stirve unremitting

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量101

点赞数

分类专栏：笔记文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_46421045/article/details/105027345

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			/*body{display:flex;}*/
			.box{
				width: 600px;
				height: 500px;
				background: pink;
				margin: 100px;
				display:flex;/*设为弹性盒*/
				align-items:center;
			}
			.box div{
				width: 100px;
				height: 100px;
				background: red;
				margin: 3px;
			}
			.box .box2{
				align-self: flex-start;
				align-self: flex-end;
				align-self: center;
				align-self: auto;
				align-self: stretch;
				align-self: center;
				order:4;
			}
			.box .box3{
				order:2;
			}
			
			.con1{
				/*width:500px;*/
				width: 100%;
				height: 50px;
				background: red;
				margin-top: 100px;
				display: flex;
				/*align-items:center;*/
			}
			.con1 input:nth-child(1){
				/*width: 396px;*/
				flex:1;/*剩余的空间给他*/
			}
			.con1 input:nth-child(2){
				width: 100px;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
			<div class="box4">4</div>
			<div class="box5">5</div>
		</div>
		<div class="con1">
			<input type="text" />
			<input type="submit" />
		</div>
	</body>
</html>