Flex框容器宽度不会增长 [英] Flex box container width doesn't grow

问题描述

在默认行方向使用弹性框时，容器高度会增加以包含所有弹性项，即使它是绝对定位的。

  #container {
 position：absolute; 
 display：flex; 
 flex-wrap：wrap; 
} 
 
 #container> div {
 flex：0 0 200px; 
 height：200px; 
} 
  

请参阅 http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

但是如果flex方向更改为column时，容器会折叠到单个flex项目的宽度，即使项目包装到下一列。

  #container {
 position：absolute; 
 display：flex; 
 flex-direction：column; 
 flex-wrap：wrap; 
} 
 
 #container> div {
 flex：0 0 200px; 
 width：200px; 
} 
  

请参阅 http://codepen.io/tamlyn/pen/rarbeN?editors=110

如何使容器包含列列中的所有flex项目

解决方案

实际上找到了一个CSS解决方案，但它不是最完美的事情在世界上。这是： http://codepen.io/anon/pen/vEPBKK

这里的诀窍是创建一个 visibility：collapsed 容器。在flex中， visibility：collapsed 对象会使用正常的flex流程，但是为了布局的目的保留它们的尺寸。这使柔性容器加宽到所需的宽度，但使柔性部件不受影响。但是，有一些注意事项：

1. 这需要一点小小的麻烦。如你所见，魔术< div> 是一个设置的宽度，但它使用：nth-​​child 在它之前有多少盒。如果你的实际设计在多于或少于3行的位置打破，你必须调整它，你必须调整对象的宽度。


2. 由于渲染错误，这不工作在IE。幸运的是，IE的不正确的实现完全按照你想要的，没有任何改变，所以你需要做的是给IE它自己的样式表与一些条件语句，并拍摄 div.magic
   
   

    < div id =container> 
   < div class =fb>< / div> 
   < div class =fb>< / div> 
   < div class =fb>< / div> 
   < div class =fb>< / div> 
   < div class =fb>< / div> 
   < div class =fb>< / div> 
   < div class =fb>< / div> 
   < div class =magic>< / div> 
   < / div> 
     

   CSS

     #container {
    position：absolute; 
    display：flex; 
    flex-direction：column; 
    flex-wrap：wrap; 
    border：1px solid＃f00; 
    height：650px; 
    padding：1px; 
   } 
    
    #container div.fb {
    border：1px solid＃555; 
    flex：0 0 200px; 
    background-color：#ccc; 
    width：200px; 
    margin：1px; 
    height：200px; 
   } 
    
    #container> div.magic {
    height：0; 
    margin：0; 
    padding：0; 
    visibility：collapsed; 
   } 
    
    #container> div.magic：nth-​​child（5），
    #container> div.magic：nth-​​child（6），
    #container> div.magic：nth-​​child（7）{
    width：408px; 
   } 
    
    #container> div.magic：nth-​​child（8），
    #container> div.magic：nth-​​child（9），
    #container> div.magic：nth-​​child（10）{
    width：612px; 
   } 
    
    #container> div.magic：nth-​​child（11），
    #container> div.magic：nth-​​child（12），
    #container> div.magic：nth-​​child（13）{
    width：816px; 
   } 
     

   
   

   When using flex box in default row direction, the container height grows to contain all the flex items, even if it is absolutely positioned.

   #container {
     position: absolute;
     display: flex;
     flex-wrap: wrap;
   }
   
   #container > div {
     flex: 0 0 200px;
     height: 200px;
   }
   

   See http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

   However if the flex direction is changed to column, the container collapses to the width of a single flex item, even if the items wrap onto the next column.

   #container {
     position: absolute;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
   }
   
   #container > div {
     flex: 0 0 200px;
     width: 200px;
   }
   

   See http://codepen.io/tamlyn/pen/rarbeN?editors=110

   How can I make the container contain all flex items in column mode?

   解决方案

   I've actually found a CSS-only solution to this but it isn't the most perfect thing in the world. Here it is: http://codepen.io/anon/pen/vEPBKK

   The trick here is to create a visibility: collapsed container. In flex, visibility: collapsed objects take themselves out of the normal flex flow but retain their dimensions for the purpose of layout. This widens the flex container to the desired width but leaves the flex items unaffected. There are a few caveats, however:

   1. This requires a bit of fiddling. As you can see, the magic <div> is a set width but it uses :nth-child to determine how many boxes are before it. If your actual design breaks at more or less than 3 rows, you'll have to adjust this and you'll most certainly have to adjust the width of the object.
   2. Because of a rendering bug, this does not work in IE. Luckily, IE's incorrect implementation does exactly what you wanted in the first place without any changes so all you have to do is give IE it's own stylesheet with some conditional statements and shoot the div.magic some good old display: none.

   HTML

   <div id="container">
     <div class="fb"></div>
     <div class="fb"></div>
     <div class="fb"></div>
     <div class="fb"></div>
     <div class="fb"></div>
     <div class="fb"></div>
     <div class="fb"></div>
     <div class="magic"></div>
   </div>
   

   CSS

   #container {
     position: absolute;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     border: 1px solid #f00;
     height: 650px;
     padding: 1px;
   }
   
   #container div.fb {
     border: 1px solid #555;
     flex: 0 0 200px;
     background-color: #ccc;
     width: 200px;
     margin: 1px;
     height: 200px;
   }
   
   #container > div.magic {
     height: 0;
     margin: 0;
     padding: 0;
     visibility: collapsed;
   }
   
   #container > div.magic:nth-child(5),
   #container > div.magic:nth-child(6),
   #container > div.magic:nth-child(7) {
     width: 408px;
   }
   
   #container > div.magic:nth-child(8),
   #container > div.magic:nth-child(9),
   #container > div.magic:nth-child(10) {
     width: 612px;
   }
   
   #container > div.magic:nth-child(11),
   #container > div.magic:nth-child(12),
   #container > div.magic:nth-child(13) {
     width: 816px;
   }
   

   这篇关于Flex框容器宽度不会增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！