Flexbox对齐项不起作用

Question

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

align-items: flex-start当我将元素的宽度设置为35%,高度设置为100%时,它们就好像我已经应用了一样.

值得关注的是一个叫做的人'topi'.

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

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

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

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

我会认为图像随着div一起移动.

有人可以开导我这个吗？

PS topidiv规则是无用的,因为图像在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 适用于容器内柔性线的对齐.

这是一个更详细的解释:

• flex-wrap如何使用align-self,align-items和align-content？