Flex佈局中的align-items屬性和align-content屬性的區別

在學習flex佈局中，發現flex容器的屬性，align-items和align-content兩個屬性都是經過交叉軸對齊的方式，看不出區別，後來經過本身嘗試的方法，明白了區別。

一、當容器內的元素只有一行時，使用align-items會使這行元素居中。可是使用align-content沒有效果。

使用align-items時效果：

使用align-content時的效果：

 

2.在多行的效果下，能夠看出，多行下，align-content有效果了，是使全部元素都沿着交叉軸居中。而align-items是使每一行的元素在每一行之中各自居中。

使用align-items的效果：

使用align-content的效果:

 

 

能夠發現align-items在單行或者多行元素中都可以生效，而align-content只在多行元素的時候才能生效。