Flex 布局中 align-items 和 align-content 侧轴设置

关于侧轴元素排列有两个属性：

• align-items
• align-content

倒是很好记忆，毕竟都是以 align 开头。

align-items 和align-content都是父元素的定义属性。父元素的这两个属性也很好理解，那就是单行用align-items，多行用align-content。

我们先考虑父元素的设置。

默认情况下 flex-wrap 这个定义是否换行的属性是不换行的，也就是说子元素是默认不换行的。对于不换行的子元素，我们只能使用align-items，例如：

运行结果是：

当子项目过多时，总长度或者总宽度超过父项目尺寸时，子项目默认不会换行，会集体缩小以适应父项目尺寸。但是毕竟大多情况我们不愿意改变子元素尺寸的。我们可以指定flex-wrap : wrap，这样子元素可以换行。每一行的位置控制就不能使用align-items，要使用align-content，例如：
而且我们会发现，align-items的常用取值只有flex-start、flex-end、center，这很好理解，毕竟一行的位置只有这三个了。而多行位置还要考虑多行间距和相对位置，于是align-content要比align-items多出两个常用属性space-around和space-between。

总结一下：单行用align-items，多行用align-content。