时间戳

首页 > 解决方案 > 考虑到所有行，使弹性项目共享相同的空间

css - 考虑到所有行，使弹性项目共享相同的空间

问题描述

我试图让弹性对齐的项目在最后一个项目之后共享所有空间。最后一个（红色）是一个带有按钮和固定大小的 div。考虑到其他行，其他项目（蓝色）是选择，需要共享剩余空间。理解这一点的其他方式是考虑蓝色项目需要在红色项目之后增长，宽度相同，最好占据所有剩余空间，但红色项目需要始终位于最后一行的末尾。

在此示例中，我使用的是 flex，但我也可以使用网格或其他东西。

例子：

例子

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

.child{
    flex: 1 1 auto;
    max-width: 25%;
}

标签： cssflexboxcss-grid

解决方案

使用此代码，您可以在一行中完成...但我知道如果 div 太小，则可以自动创建第二行。我会在几分钟内更新这个片段。

.container{
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: 1fr;
    background: blue;
}
.container div {
    border: 1px solid black;
}
.container div.red {
    width: 310px;
    background: red;
}
<html>
  <body>
    <div class="container">
      <div>MENU RANDOM</div>
      <div>MENU CONTENT</div>
      <div>MENU DIVS</div>
      <div>MENU IN</div>
      <div>MENU THIS</div>
      <div>MENU LAYOUT</div>
      <div>MENU AND</div>
      <div class="red">EXACT 210px</div>
    </div>
  </body>
</html>

推荐阅读