弹性和模型和晚上的作业

最新推荐文章于 2024-08-05 11:13:28 发布

凉不了

最新推荐文章于 2024-08-05 11:13:28 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/longxilong/article/details/100673136

版权

【代码块】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.demo{
				width: 400px;
				height: 700px;
				background: teal;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}
			.box{
				width: 100%;
				height: 100px;
				background: red;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}
			.box img{
				width: 80px;
				height: 80px;
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="box"><img src="img/j.jpg"/><h1>啥几把都流口水</h1></div>
			<div class="box"><img src="img/j.jpg"/><h1>啥几把都流口水</h1></div>
			<div class="box"><img src="img/j.jpg"/><h1>啥几把都流口水</h1></div>
			<div class="box"><img src="img/j.jpg"/><h1>啥几把都流口水</h1></div>
		</div>
	</body>
</html>```
【效果图】
在这里插入图片描述![在这里插入图片描述](https://img-blog.csdnimg.cn/20190909200426440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd4aWxvbmc=,size_16,color_FFFFFF,t_70)
【学的内容】
Box-sizing---盒子尺寸
flex---弹
Direction（第ruai课深）---方向
Display-----设置盒模型
justify-content----盒模型水平方向对齐方式
容器属性
①弹性盒模型display:flex;
②元素的排列方向flex-direction:row水平（默认值） | row-reverse 水平反转| column 竖直|column-reverse竖直反转
③元素是否换行flex-wrap:nowrap不换行（默认值） | wrap换行 | wrap-reverse换行反转
④项目元素在主轴上的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
⑤元素在交叉轴的对齐方式align-items:stretch（默认值） | center  | flex-end | baseline | flex-start
⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

集成属性：