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

小编典典

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

css

我有一个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>

阅读 492

2020-05-16

共1个答案

小编典典

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

.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>

2020-05-16