css 为什么我的弹性框在前两个子对象和第三个子对象之间添加了间隙?[duplicate]

py49o6xq  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(76)
    • 此问题在此处已有答案**:

What's the difference between align-content and align-items?(15个答案)
昨天关门了。
我希望第三个子容器,即宽度为100%的子容器,直接出现在前两个子容器的下面,而不是环绕到子容器的底部。
为什么会发生这种情况?我怎样才能让它按我想要的方式运行?
我知道我可以降低父容器的高度以使其按我所希望的方式显示,但我不明白为什么即使将容器设置为当前高度,它也不会按预期方式 Package

  • 注意 *:您可能需要全屏查看示例才能明白我的意思
.parent{
  height: 80vh;
  width: 100%;
  border: 1px solid red;
  
  display: flex;
  flex-wrap: wrap;
  grid-gap: 10px;
}

.parent > *{
  background-color: lightblue;
}

.child1{
  height: 100px;
  width: 100px;
}

.child2{
  width: 100%;
}
<div class="parent">
  <div class="child1">some text</div>
  <div class="child1">some text</div>
  <div class="child2">
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
  </div>
</div>
jrcvhitl

jrcvhitl1#

如果希望所有元素都位于顶部,请使用align-content: flex-start;

.parent{
  height: 80vh;
  width: 100%;
  border: 1px solid red;
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  grid-gap: 10px;
}

.parent > *{
  background-color: lightblue;
}

.child1{
  height: 100px;
  width: 100px;
}

.child2{
  width: 100%;
}
<div class="parent">
  <div class="child1">some text</div>
  <div class="child1">some text</div>
  <div class="child2">
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
    <div>more text</div>
  </div>
</div>

相关问题