html - Flexbox 对齐元素不起作用

Question

所以我遇到了一个小问题，图片没有根据 flexbox 中的 align-items 属性移动，我不确定为什么。

当我将元素的宽度设置为 35% 并将高度设置为 align-items: flex-start 时，它们就好像我应用了到 100%。

关注的 div 是名为 'topi' 的那个。

总结一下我想要的布局(虽然它有点不相关但可能有助于解决这个问题):

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

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

我的意思是我制作了图像也在 flexboxes 中的 div，尽管我认为这无关紧要，因为使 'topi' 类具有属性 align-items: center/space -around，它应该在包含图像的 div 上工作。

我原以为图像会随着 div 一起移动。

有人可以启发我吗？

附言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 适用于 flex 行内 flex 元素的对齐。

align-content 适用于容器内 flex 线的对齐方式。

这里有更详细的解释:

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