基础属性

父元素属性：

• flex-direction:row|row-reverse|column|column-reverse
• flex-wrap:nowrap|wrap|wrap-reverse
• flex-flow:<flex-direction>|<flex-wrap>
• justify-content: flex-start | center | flex-end | space-around | space-between
• align-items:flex-start | center | flex-end | baseline | stretch
• align-content: flex-start | center | flex-end | space-around | space-between | stretch

子元素属性：

• flex-basis
• flex-shrink:<number>
• flex-grow:<number>
• flex:<flex-grow> | <flex-shrink> | <flex-basis>
• align-self
• order:<integer>

关于align-items于align-content区分：

单行子项

1.不设置flex容器高度

align-items默认属性为normal顶部对齐，align-content默认属性也为mormal左边对齐，效果如下：

align-items

display: flex
align-items:center

由于没有设置容器高度，此时容器高度为最高子项的高度，子项中各元素在交叉轴上以此高度进行居中对齐。

align-content

display: flex
align-content:center

对于单轴子项，align-content没有效果。

2.设置flex容器高度

align-items默认属性为normal顶部对齐，和不设置容器高度时效果一样：

align-items

height:500px
display: flex
align-items:center

设置了容器高度以后，align-items使得子项在交叉轴基于容器高度进行居中对齐。

align-content

height:500px
display: flex
align-content:center

即使设置了容器高度，align-content仍然不起效果。

多行子项

1.不设置flex容器高度

每一行的高度为最大子项的高度。

align-items

display: flex
align-items:center

效果与单行子项一样，各行基于最大子项的高度进行居中对齐。

align-content

display: flex
align-content:center

与初始状态一样，由于容器的高度是由子项撑开，而align-content是以所有子项作为整体的，因为交叉轴上没有多余空间可以分配，因此align-content没有效果。

2.设置flex容器高度

此时的align-items和align-content的默认值normal效果与不设置容器高度效果不同：

align-items

height:500px
display: flex
align-items:center 容器根据交叉轴上的空间按行数进行分配，各行子项在自己所在行进行居中对齐：

align-content

height:500px
display: flex
align-content:center align-content将所有行子项作为一个整体进行居中对齐：

特殊情况

当子项为单行，但flex-wrap设置为wrap时，align-content仍然会有效果:

简单练习网站：flexboxfroggy.com/

参考资料： 1.developer.mozilla.org/zh-CN/docs/… 2.blog.csdn.net/cc188688768…