弹性布局学习，小发现总结

时间 2021-01-21 标签网页前端网页布局

学习弹性布局时，发现的小细节，整理如下

说明：当父类容器使用 display:flex（弹性布局）时，子元素使用width和height设置大小，父类容器使用 justify-content:flex-start| flex-end | center | space-between | space-around 设置子元素在主轴（纵轴）方向上的对齐方式，子元素不会占满父容器的高（height）。

相反，子元素使用padding(内边距)设置大小，父类容器使用 justify-content:flex-start| flex-end | center | space-between | space-around 设置子元素在主轴（纵轴）方向上的对齐方式，子元素会占满父容器的高（height）。另 align-items值中仅 stretch值会占满父类容器的高。

代码 + 运行结果如下：`

子元素使用width和height设置大小**，父类容器**使用 justify-content | align-items设置子元素在
主轴（纵轴）方向上的对齐方式，子元素不会占满父容器的高（height）。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性盒子布局练习</title>
<style type="text/css">
	#div1 {
		width: 600px;
		height: 300px;
		display: flex;
		background: #ccc;
	}
	.div1,.div2,.div3 {
		padding:25px;
		background: red;	
	}
</style>
</head>
<body>
	<div id="div1">
		  <div class="div1">1</div>
		  <div class="div2">2</div>
		  <div class="div3">3</div>
	</div>  
</body>
</html>

一、	父类容器使用align-items: stretch;设置子元素在侧轴（纵轴）方向上的对齐方式。

二、父类容器使用 justify-content:center;设置子元素在主轴（纵轴）方向上的对齐方式。

三、父类容器**使用 justify-content:flex-end;设置子元素在主轴（纵轴）方向上的对齐方式。

四、父类容器**使用 justify-content:flex-start设置子元素在主轴（纵轴）方向上的对齐方式。