为何单行flex项目会受align-content:flex-start属性影响？

问题背景 #

我之前了解到align-content属性仅在flex容器存在多行项目时生效，因为它用于控制行之间的间距，单行时应无作用。但在以下代码中，给flex容器设置了display: flex; flex-flow: wrap row; justify-content: center; align-items: center; align-content:flex-start，按认知单行项目应垂直居中，实际项目却靠容器顶部显示，请问这是为什么？

CSS代码 #

* {
  box-sizing: border-box;
  font-size: 1.5rem;
}

html {
  background: #b3b3b3;
  padding: 5px;
}

body {
  background: #b3b3b3;
  padding: 5px;
  margin: 0;
}

.flex-container {
  background: white;
  padding: 10px;
  height: 1300px;
  border: 5px solid black;
  display: flex;
  flex-flow: wrap row;
  justify-content: center;
  align-items: center;
  align-content:flex-start
}

.item-1 {
  background: #ff7300;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
}

.item-2 {
  background: #ff9640;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 250px;
  font-size: 1.8rem;
}

.item-3 {
  background: #ff9640;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  height: 250px;
}

.item-4 {
  background: #f5c096;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 300px;
  height: 300px;
}

.item-5 {
  background: #d3c0b1;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 350px;
}

.item-6 {
  background: #d3c0b1;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 350px;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="main.css">
        <title>Flexbox</title>
    </head>
    <body>
        <div class="flex-container">
            <div class="item-1">div</div>
            <div class="item-2">w=250px</div>
            <div class="item-3">h=250px</div>
            <div class="item-4">w/h=300px</div>
            <div class="item-5">w=350px</div>
            <div class="item-6">w=350px</div>
        </div>
    </body>
</html>

原因分析 #

这是因为设置align-content后，即便只有一行flex项目，align-items的垂直居中效果也会被覆盖。

flex布局的规则是：当容器设置了align-content，它会控制所有flex行在容器交叉轴上的整体对齐方式。此时align-items仅负责控制每一行内部项目的对齐，但如果只有一行，这一行会被align-content:flex-start强制定位到容器交叉轴的起始位置（顶部）。align-items:center只能让项目在这一行内部垂直居中，但行本身已经被顶到容器顶部，所以整体看起来项目就靠顶部显示。

简言之，align-content在控制行的整体位置上优先级更高，只要设置了该属性，无论行数多少，都会影响行在交叉轴上的位置，单行时也不例外——它会把唯一的一行放在指定位置，而align-items只是让项目在该行内居中，而非让行在容器内居中。

解决方法 #

如果要实现单行项目垂直居中，只需去掉align-content:flex-start，或者将align-content的值改为center，这样行本身会在容器交叉轴居中，配合align-items:center就能达到预期效果。

内容的提问来源于stack exchange，提问作者LICON99