html – FLEXBOX min-width：min-content/max-width

发布时间：2020-12-14 22:21:41 所属栏目：资源来源：网络整理

导读：我需要这个：集装箱宽度固定宽度，物料在行方向流动并包裹在末端。每个项目应该是最大宽度：400px，溢出的内容应该被剪切。项目的最小宽度应由内容确定，但是它不应短于200px。这是我的css代码，它不包括“最小内容”方面。最小内容由w3在其flexbox工作

我需要这个：

集装箱宽度固定宽度，物料在行方向流动并包裹在末端。

每个项目应该是最大宽度：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>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>

解决方法

问题是flex：1设置flex-basis：0相反，你需要

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!