弹性布局
布局就是控制某个指定元素放到指定位置上，弹性布局 是用来实现页面布局的。
实现页面布局有以下几种方式：
1、基于表格的布局方式。
2、基于浮动的布局方式，主要是解决 “水平方向排列” 问题。
3、弹性布局，也是解决 “水平方向排列” 问题。
4、网格布局，这是二维的布局，相当于是更加高级的的 “表格布局”。
这次只介绍 弹性布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅</title>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
}
div > span {
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
1、开启弹性布局
给要水平排列的元素的父元素设置 flex。
此时弹性容器里面的元素，则不再是 “块级” “行内元素”，而是成为了 “弹性元素”，
是遵守弹性布局的，此时可以设置尺寸和边距的。
display: flex;
设置好 display: flex; 后，就形成了以上的效果，可以看到它的宽度和高度都相同了。
2、设置这些元素的水平方向的排列方式
以下表示的是靠左边排列。
justify-content: flex-start;
以上表示的是靠右边排列。
justify-content: flex-end;
以下表示的是居中排列。
justify-content: center;
以下是一种间隔的排列方式，并且两端会有边距
justify-content: space-around;
以下表示的是一种间隔的排列方式，并且两端不会有边距
justify-content: space-between;
3、设置元素垂直方向的排列方式
如果想要以下页面中的绿色框框向下移动，就需要使用 align-items: flex-end;
end 表示的就是向下排列。
使用后就会变为以下页面。
也可以使用 center 来实现居中布局。