为什么这些弹性物品没有包装？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个flex项目，它也是一个flex容器.sub-con，问题是.sub-con即使添加了，它的flex项目也拒绝包装flex-flow:

row wrap。

谁能为我解决这个问题，或指出我做错了什么。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  height: 100vh;
}
.sub-con {
  margin-right: 50px;
  margin-left: 50px;
  height: 500px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
.col-one {
  height: 100px;
  border: 1px solid lightgreen;
  flex-grow: 2;
}
.col-two {
  height: 100px;
  border: 1px solid red;
  flex-grow: 1;
}
<div class="container">
  <div class="sub-con">
    <div class="col-one"></div>
    <div class="col-two"></div>
  </div>
</div>

回答：

嵌套容器中的伸缩项目按 调整大小。

.col-one{
  width: 40%;
  height: 100px;
  border: 1px solid lightgreen;
}
.col-two{
  width: 40%;
  height: 100px;
  border: 1px solid red;
}

由于百分比长度基于父级的长度，因此 没有理由进行包装 。它们将始终是父级的40％，即使父级的宽度为1％。

如果您使用其他长度单位，例如px或em，它们将自动换行。

 .container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-flow: row wrap;
   height: 100vh;
 }
 .sub-con {
   flex: 1;  /* for demo only */
   align-content: flex-start; /* for demo only */
   margin-right: 50px;
   margin-left: 50px;
   height: 500px;
   background-color: #fff;
   display: flex;
   justify-content: center;
   flex-flow: row wrap;
 }
 .col-one {
   width: 200px;
   height: 100px;
   border: 1px solid lightgreen;
 }
 .col-two {
   width: 200px;
   height: 100px;
   border: 1px solid red;
 }
<div class="container">
  <div class="sub-con">
    <div class="col-one"></div>
    <div class="col-two"></div>
  </div>
</div>

以上是 为什么这些弹性物品没有包装？ 的全部内容， 来源链接： utcz.com/qa/400534.html

回到顶部