为什么这个柔性容器不包裹柔性物品？ [英] Why is this flex container not wrapping the flex items?

问题描述

我有一个flex项目，它也是一个flex容器 .sub-con ，问题是 .sub-con 拒绝包装，甚至在添加后： flex-flow：换行;

Can任何人为我解决这个问题，或指出我在做什么错。

.container {display：flex; justify-content：center; align-items：center; flex-flow：排行; height：100vh;}。sub-con {margin-right：50px; margin-left：50px;身高：500px; background-color：#fff;显示：flex; justify-content：center; flex-flow：row wrap;}。col-one {height：100px;边框：1px实心浅绿色; flex-grow：2;}。col-two {height：100px;边框：1px纯红色; flex-grow：1;}

< div class = 容器 > < div class =sub-con> < div class =col-one>< / div> < div class =col-two>< / div> < / div>< / div>

解决方案

$ b

  .col-one {
宽度：40％; 
 height：100px; 
 border：1px纯色lightgreen; 
} 
 .col-two {
 width：40％; 
 height：100px; 
 border：1px纯红色; 
 
 
 
 
 
 $ b 
因为百分比长度取决于父项的长度，没有内容，他们没有理由包装。他们将永远是父母的40％，即使父母的宽度为1％。
 
 
 
如果您使用其他单位的长度，例如 px 或者 em ，或者添加内容，它们将会自动换行
 
 
 
 < a href =https://jsfiddle.net/2xycyvr0/ =nofollow noreferrer> jsFiddle演示  
 
 
 
 
 
  .container {display：flex; justify-content：center; align-items：center; flex-flow：排行;身高：100vh; } .sub-con {flex：1; / *仅用于演示* / align-content：flex-start; / *仅用于演示* / margin-right：50px; margin-left：50px;身高：500px; background-color：#fff;显示：flex; justify-content：center; flex-flow：排行; } .col-one {width：200px; height：100px;边框：1px实心浅绿色; } .col-two {width：200px; height：100px;边框：1px纯红色; }  
 
 < div class =container> < div class =sub-con> < div class =col-one>< / div> < div class =col-two>< / div> < / div>< / div>  

I have a flex item that is also a flex container .sub-con, problem is the flex item of .sub-con is refusing to wrap, even after adding : flex-flow: row wrap;

Can anyone fix this for me, or point out what I'm doing wrong.

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

解决方案

Your two flex items in the nested container are sized with percentages.

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

Because percentage lengths are based on the length of the parent, and your items have no content, they have no reason to wrap. They will always be 40% of the parent, even if the parent has a width of 1%.

If you use other units for length, such as px or em, or add content, they will wrap.

jsFiddle demo

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

这篇关于为什么这个柔性容器不包裹柔性物品？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！