Flexbox对齐项不起作用

Question

所以我面临一个小问题，根据flexbox中的align-items属性，图片没有移动，我不知道为什么。

当我将元素的宽度设置为 35％并将高度设置为 100％align-items: flex-start一样>

关注点是名为'topi'的人。

总结一下我的目标布局（虽然它稍微不相关但可以帮助解决这个问题）：

我想在父div中有两个父行。顶行有两个部分，我希望底部行有3个以上的部分列。

我只是不确定为什么图像没有移动。

我的意思是我创建了图像在flexbox中的div，虽然我认为这是无关紧要的，因为使'topi'类具有属性align-items: center/space-around，它应该适用于包含图像。

我会认为图像与div一起移动。

有人可以开导我吗？

P.S。 topi div规则是否无效，因为图像位于div中，因此只需topi的规则即可，对吧？谢谢。

.container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  height: 95vh;
  width: 80%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.top {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: center;
}
.bottom {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.bottomi {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  background-color: red;
}
.topi {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: space-around;
  width: 35%;
  height: 100%;
  ;
  background-color: white;
}
.topi div {
  display: flex;
  width: 100%;
  height: auto;
}
.topi2 {
  width: 65%;
  height: 100%;
  ;
  background-color: yellow;
  font-size: 20px;
}
.top,
.bottom {
  width: 100%;
  background-color: green;
}
.top {
  height: 60%;
}
.bottom {
  height: 40%;
}
.top {
  border: 1px solid green;
}
.bottom {
  border: 1px solid pink;
}

<div class="container">
  <div class="top">
    <div class="topi">
      <img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
      <img src="george.jpg" width="209" height="205" alt="Picture of kid" />
    </div>
    <div class="topi2">
      <p>Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sample Sample sample sampleSample sample sample Sample sample sample
        Sample sample sample Sample sample sample
      </p>
    </div>
  </div>
  <div class="bottom">
    <div class="bottomi">
    </div>
    <div class="bottomi2">
    </div>
    <div class="bottomi3">
    </div>
  </div>
</div>

Answer 1

没有align-items: space-around这样的东西。

您需要align-content: space-around。

align-items适用于柔性线内柔性物品的对齐。

align-content适用于容器内柔性线的对齐。

这里有一个更详细的解释：

• How does flex-wrap work with align-self, align-items and align-content?