FLEXBOX min-width：min-content / max-width [英] FLEXBOX min-width: min-content / max-width

问题描述

我需要这样：

容器宽度固定宽度，项目在行方向流动，并在结尾包装。

每个项目应该最大宽度：400px，溢出内容应该剪切。
项目的最小宽度应该由内容决定，但是：它不应该短于200px。

这里是我的CSS代码，它不涵盖最小内容方面。最小内容由w3在他们的flexbox工作草案建议，但它似乎不工作在我的情况：

 。 container {
 display：-webkit-flex; 
 display：flex; 
 -webkit-flex-wrap：wrap; 
 flex-wrap：wrap; 
} 
 
 .container .box {
 -webkit-flex：1; 
 flex：1; 
 min-width：200px; 
 max-width：400px; 
 height：200px; 
 background-color：＃fafa00; 
 overflow：hidden; 
} 
  

且html是：

 < div class =container> 
< div class =box> 
< table> 
< tr> 
< td>内容< / td> 
< td>内容< / td> 
< td>内容< / td> 
< / tr> 
< / table> 
< / div> 
< div class =box> 
< table> 
< tr> 
< td>内容< / td> 
< / tr> 
< / table> 
< / div> 
< div class =box> 
< table> 
< tr> 
< td>内容< / td> 
< td>内容< / td> 
< / tr> 
< / table> 
< / div> 
 [...] 
< / div> 
  

解决方案

问题是 flex ：1 设置 flex-basis：0 。您需要

  .container .box {
 min-width：200px; 
 max-width：400px; 
 flex-basis：auto; / *默认值* / 
 flex-grow：1; 
} 
  

  .container {display： -webkit-flex;显示：flex; -webkit-flex-wrap：wrap; flex-wrap：wrap;}。container .box {-webkit-flex-grow：1; flex-grow：1; min-width：100px; max-width：400px; height：200px; background-color：＃fafa00; overflow：hidden;}  
 
 < div class = > < div class =box> < table> < tr> < td>内容< / td> < td>内容< / td> < td>内容< / td> < / tr> < / table> < / div> < div class =box> < table> < tr> < td>内容< / td> < / tr> < / table> < / div> < div class =box> < table> < tr> < td>内容< / td> < td>内容< / td> < / tr> < / table> < / div>< / div>  
 

I need this:

Container width fixed width, items flowing in the row direction and wrapping at the end.

each item should be maximum width: 400px, overflowing content should be cut. the minimum width of the items should be determined by the content, however: it should never be shorter than 200px.

Here is my css code, it does not cover the "min-content" aspect. min-content is suggested by the w3 in their flexbox working draft, but it does not seem to work in my case:

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.container .box {
    -webkit-flex: 1;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    height: 200px;
    background-color: #fafa00;
    overflow: hidden;
}

and the html is:

<div class="container">
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    [...]
</div>

解决方案

The problem is that flex: 1 sets flex-basis: 0. Instead, you need

.container .box {
  min-width: 200px;
  max-width: 400px;
  flex-basis: auto; /* default value */
  flex-grow: 1;
}

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container .box {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  min-width: 100px;
  max-width: 400px;
  height: 200px;
  background-color: #fafa00;
  overflow: hidden;
}

<div class="container">
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>    
  </div>
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
      </tr>
    </table>    
  </div>
  <div class="box">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>    
  </div>
</div>

这篇关于FLEXBOX min-width：min-content / max-width的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！