Flexbox 对齐项目不起作用答案

【问题标题】：Flexbox align-items not workingFlexbox 对齐项目不起作用
【发布时间】：2018-03-24 00:15:16
【问题描述】：

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

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

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

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

我想要父 div 中有两个父行。顶行有两个部分，我希望底行有 3+ 个部分列。

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

我的意思是我制作的 div 也包含图像在 flexbox 中，尽管我认为这无关紧要，因为使 '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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

你需要align-content: space-around。

align-items 适用于 flex 行内 flex 项目的对齐方式。

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

这里有更详细的解释：

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

【讨论】：