将剩余的高度或宽度填充到弹性容器中 [英] Fill the remaining height or width in a flex container

问题描述

我在flexbox中并排有2个div.右手应始终具有相同的宽度，我希望左手仅抓住剩余的空间.除非我专门设置宽度，否则它不会.

I have 2 divs side-by-side in a flexbox. The right hand one should always be the same width, and I want the left hand one to just grab the remaining space. But it won't unless I specifically set its width.

因此，现在将其设置为96％，在您真正压紧屏幕之前看起来还可以-右手的div会饿死它所需的空间.

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

我想我可以原样保留它，但是感觉很不对-就像必须要说:

I guess I could leave it as it is but it feels wrong - like there has to be a way to say:

正确的始终是相同的；你在左边-你得到了剩下的一切

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

推荐答案

使用 flex-grow 属性使flex项目消耗主轴上的自由空间 .

Use the flex-grow property to make a flex item consume free space on the main axis.

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

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

一个常见的示例是 flex-grow:1 ，或者使用简写属性， flex:1 .

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

因此，请使用 flex:1 .而不是您的div上的 width:96％.

Hence, instead of width: 96% on your div, use flex: 1.

您写道:

因此，现在将其设置为96％，在您真正压紧屏幕之前看起来还可以-右手的div会饿死它所需的空间.

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

固定宽度div的压缩与另一个flex属性有关: flex-shrink

The squashing of the fixed-width div is related to another flex property: flex-shrink

默认情况下，flex项设置为 flex-shrink:1 ，以使其收缩以防止容器溢出.

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

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

To disable this feature use flex-shrink: 0.

有关更多详细信息，请参见答案中的 弹性收缩因子 部分

For more details see The flex-shrink factor section in the answer here:

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

在此处了解有关沿主轴的弯曲对齐的更多信息:

Learn more about flex alignment along the main axis here:

• 在CSS Flexbox中，为什么没有"justify-items"和自我证明".属性?

在此处了解有关沿横轴的弯曲对齐的更多信息:

Learn more about flex alignment along the cross axis here:

• flex-wrap如何与align-self，align-items和align-content一起使用?

这篇关于将剩余的高度或宽度填充到弹性容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！