logo标签列表

Flexbox的align-items属性无法正常工作

htmlcssflexbox
5
所以我遇到了一个小问题，图片在flexbox中不按照“align-items”属性移动，我不确定原因。它们的行为就像我已经应用了“align-items: flex-start”，而我将元素的宽度设置为“35％”，高度设置为“100％”。有问题的div是名为“topi”的那个。 总结一下我想要的布局（虽然这有点无关紧要，但可能有助于回答这个问题）：我想在父div中有两行。顶部一行有两个部分，底部一行有3个以上的部分列。 我只是不确定为什么图片没有移动。我的意思是，我也使包含图像的div成为flexboxes，尽管我认为这与此无关，因为使“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>

1个回答
10
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接