课程名称：六个案例学会响应式布局

课程章节： flex基础与应用

课程讲师：大谷

课程内容：

结合上节课学习的内容，如果我们设置了换行，那么子元素总宽度超过了父元素就会进行换行，但是当子元素进行换行时，第一排的空间不足再放一个子元素，我们如何对剩余空间进行处理。

处理方法有以下两种：

justify-content：作用是用来在存在剩余空间时，设置为间距的方式。

属性值有：

(1) flex-start： 用来表示默认值，从左到右，挨着行的开头。

(2) flex-end：表示从右到左，挨着行的结尾。

(3) center：表示居中显示。

(4) space-between：表示平均分布在该行上，两边不留间隔空间。

(5) space-around：表示平均分布在该行上，两边留有一半的间隔空间。

第一种属性的演示，我们可以写flex-start这个属性也可以不写，因为这个属性是默认的。

第二种效果，当我们想要让元素靠右边空间显示，可以将flex-start替换成flex-end。

第三种效果，让所有的元素横向居中显示，然后两边的空白距离一样，可以使用center。

第四种属性值，我们想要让换行的元素显示在父元素的两侧，中间空白，可以使用space-between。

第五种属性值，我们想要实现元素横向平均分布，两边留有一半的间隔空间就可以使用space-around。

align-items的作用：设置每个flex元素在交叉轴上的默认对齐方式。

注意交叉轴：

(1) 当x轴是主轴的话，那么y轴就是交叉轴。y轴作为交叉轴，那么对齐方式就是上中下。

(2) 如果y轴是主轴的话，那么x轴就是交叉轴。x轴作为交叉轴，那么对齐方式就是左中右。

属性值有以下几种：

(1) flex-start：位于容器的开头。

(2) flex-end：位于容器的结尾。

(3) center：居中显示。

当我们想要实现元素在y轴上居中显示，我们可以使用center这个属性值。

当我们想要元素显示在顶部，我们就可以使用flex-start这个属性值。这个属性值我们也可以不写，因为是默认值。

当我们想要将元素显示在底部，我们就可以使用flex-end这个属性值。

如果我们想要将元素纵向进行左中右的显示，我们需要将flex-direction中属性值row修改为column，那么我们就可以对align-items设置为flex-start。

以此类推，我们就可以通过修改align-items的属性值，让元素显示在中间和右侧。

align-content的作用：设置每个flex元素在交叉轴上的默认对齐方式。与align-items有很多相同之处，不同之处是它把多行里面的内容，当做一个整体进行处理。我们要想实现整体元素的向上，向下或者居中，可以使用这个属性值。而align-items是将每一行当做一个整体来处理。

align-content相关属性值：

(1) flex-start：位于容器的开头。

(2) flex-end：位于容器的结尾。

(3) center：位于容器的中心。

(4) space-between：之间留有空白。

(5) space-around：两端都留有空白。

align-items和align-content我们需要注意的是就是处理单行和多行的问题，其他用法都类似。

课程收获：

这一章主要学习了flex中的align-items和justify-content以及align-content相关属性值。相比上一章知识，我们这一章主要是对上一章中没有涉及到剩余空间的处理。这一节中唯一需要注意的细节就是align-items和align-content分别是对单行和多行显示位置的处理。通过这一章的学习，我们在布局上就不会出现空白区域不均匀的情况，我们在排版时可以让每个间距看起来是一样的，从而让开发出来的效果更好看。