弹性布局

布局就是控制某个指定元素放到指定位置上，弹性布局 是用来实现页面布局的。

实现页面布局有以下几种方式：

1、基于表格的布局方式。

2、基于浮动的布局方式，主要是解决 “水平方向排列” 问题。

3、弹性布局，也是解决 “水平方向排列” 问题。

4、网格布局，这是二维的布局，相当于是更加高级的的 “表格布局”。

这次只介绍 弹性布局。



我真帅
123

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 来实现居中布局。