在 flex 容器中填充剩余的高度或宽度

Question

在 flex 容器中填充剩余的高度或宽度

htmlcssflexbox

525

我在flexbox中有两个并排的div。右侧的div应该总是相同的宽度，而我希望左侧的div只占用剩余的空间。但是除非我明确设置其宽度，否则它不会这样做。

所以目前，它设置为96％，在屏幕被压缩时看起来还可以，但是右侧的div会有一点点空间不足。

我想我可以把它留在原样，但感觉不太对-就像必须有一种方法说：

右边的宽度始终相同；你在左边-你得到剩下的一切

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>

- Adam Benson

1

你也可以使用 grid-template-rows/columns。 - Scott Anderson

3个回答

109

基本上我试图让我的代码在“行”上有一个中间部分自动调整到两侧的内容（在我的情况下，是一个点线分隔符）。像@Michael_B建议的那样，关键是在行容器上使用display:flex，并至少确保您在行上的中间容器具有比外部容器高至少1个flex-grow值（如果外部容器没有应用任何flex-grow属性，则中间容器仅需要1个flex-grow）。

这是我试图做的事情的图片以及我如何解决它的示例代码。

.row {
  background: lightgray;
  height: 30px;
  width: 100%;
  display: flex;
  align-items:flex-end;
  margin-top:5px;
}
.left {
  background:lightblue;
}
.separator{
  flex-grow:1;
  border-bottom:dotted 2px black;
}
.right {
  background:coral;
}

<div class="row">
  <div class="left">Left</div>
  <div class="separator"></div>
  <div class="right">Right With Text</div>
</div>
<div class="row">
  <div class="left">Left With More Text</div>
  <div class="separator"></div>
  <div class="right">Right</div>
</div>
<div class="row">
  <div class="left">Left With Text</div>
  <div class="separator"></div>
  <div class="right">Right With More Text</div>
</div>

- HaulinOats

11

使用这两行代码将元素放在弹性容器中：

flex-grow: 1; // Fill remaining space
min-width: 0; // Don't use more space than available

- Luca Ziegler

谢谢回复，但是Michael Benjamin的答案解决了这个问题-几年前 :-) - Adam Benson

1

谢谢，你真是救星！我整天都在找这个。 - KareemJ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

使用 flex-grow 属性可以使 flex 项在主轴上占用自由空间。

该属性将使项目尽可能地扩展，根据动态环境调整其长度，例如屏幕大小调整或添加/删除其他项。

一个常见的例子是 flex-grow: 1 或使用简写属性 flex: 1。

因此，不要使用 width: 96% 设置您的 div，而应使用 flex: 1。

您编写：

所以目前它被设置为 96%，看起来还好，直到你真正挤压屏幕 - 然后右侧的 div 就会有点缺乏它所需的空间。

固定宽度 div 的挤压与另一个 flex 属性相关：flex-shrink 默认情况下，flex 项设置为 flex-shrink: 1，这使它们可以缩小以防止容器溢出。

要禁用此功能，请使用 flex-shrink: 0。

有关更多详细信息，请参见此处答案中的 flex-shrink factor 部分：

flex-basis 和 width 之间有什么区别？

在此处了解有关沿主轴的 flex 对齐的更多信息：

CSS Flexbox 中为什么没有 "justify-items" 和 "justify-self" 属性？

在此处了解有关沿交叉轴的 flex 对齐的更多信息：

flex-wrap 如何与 align-self、align-items 和 align-content 一起工作？