使用align-items：flex-start和align-content：center的Flexbox

Question

日安。

我试图使用flex box在交叉轴上包含多余空间的flex容器中强制执行以下行为：

1. 如果所有flex项目都适合一行，那么它们应该在十字轴的顶部对齐；但是
2. 折叠后，弯曲项应该在十字轴的中心集中。

为此，我在https://jsfiddle.net/ht5bue6s/上尝试了以下标记

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

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

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

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

.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;
}

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

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

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

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

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
</div>

正如您将看到的，flex项总是集中到中心。也就是说，即使flex项没有换行，也始终应用“align-content：center”。

我读过MDN的引言，“为了使align-content工作，您需要在flex容器中设置比显示项目所需的高度更高的高度。然后，它将所有项目作为一个集合来工作，并指示空闲空间发生了什么，以及其中整个项目集的对齐方式”。

这样看来，如果flex容器中的交叉轴上有多余的空间，您就不能在align-content旁边应用align-items。相反，align-content将始终覆盖align-items。

所以我的问题是：是否有任何容器或项CSS属性的组合会产生上面#1和#2需求中描述的行为？

谢谢你。

Answer 1

要实现所需的结果，可以使用媒体查询。

为此，请从.flex-container元素中删除flex-wrap和align-content属性。我们将在浏览器窗口特定宽度的.flex-container元素上添加这些属性。

例如，在媒体查询之后

@media (max-width: 450px) {
  .flex-container {
    flex-wrap: wrap;
    align-content: center;
  }
}

当浏览器窗口宽度等于或小于450px时，将使flex容器成为多行flex容器。我们还添加align-content:center，以确保flex行在flex容器的中心对齐。

这确保对于宽度大于450px，flex容器只有一个flex行，并且flex项在该flex行的开始处对齐。对于小于或等于450px的宽度，我们将flex容器设置为多行flex容器，并使用align-content:center在flex容器的中心对齐这些flex行。

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

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

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

.flex-container {
  height: 500px;
  background: white;
  padding: 10px;
  border: 5px solid black;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.flex-container div {
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
}

.item-1 { background: #ff7300; }
.item-2 { background: #ff9640; }
.item-3 { background: #ff9640; }
.item-4 { background: #f5c096; }
.item-5 { background: #d3c0b1; }
.item-6 { background: #d3c0b1; }   

@media (max-width: 450px) {
  .flex-container {
    flex-wrap: wrap;
    align-content: center;
  }
}

<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
</div>