使div填充剩余*水平* flexbox中的空间 [英] Make div fill remaining *horizontal* space in flexbox

问题描述

我有一个柔性盒并排2个div。右手应该总是相同的宽度，我想要左手抓住剩余的空间。但它不会，除非我特别设置其宽度。

所以目前，它设置为96％，这看起来不错，直到你真的压扁屏幕 - 然后右手部div得到它需要的空间有点饿了。

我想我可以离开它，但它感觉不对 - 就像必须有一种方式说：

正确的一个总是一样的;你在左边 - 你得到了所有剩下的东西

  .ar-course-nav {cursor：pointer; padding：8px 12px 8px 12px; ar-course-nav：hover {background-color：rgba（0，0，0，0.1）;}  

 <峰; br /><峰; br />< DIV类= AR-当然-NAV 样式=显示：弯曲; justify-content：space-between;> < div style =width：96％;> < div style =overflow：hidden; white-space：nowrap; text-overflow：ellipsis;> < strong title =课程名称真的很长，而且有一点点，但是当你认为它停止时，它会持续更久！>课程名称真的很长，而且有一点点但是当你认为它停止的时候，它会持续更长的时间！ < /强> < / 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 =真的真的真的真的真的真的真的真的很长的部门名称>>一个真的真的真的真的真的真的真的很长的部门名称< / div> < div style =color：＃555555; text-align：right; white-space：nowrap;>创建日期：2016年9月21日< / div> < / DIV> < / DIV> < div style =margin-left：8px;> <强>&安培; GT;< /强> < / DIV>< / DIV>  

解决方案使用 flex-grow 属性可以使Flex项目消耗主轴上的可用空间 。

这个属性将尽可能地扩展这个项目，调整动态环境的长度，比如重新调整大小或者添加/删除其他项目。
$ b

一个常见的例子是 flex-grow：1 或者，使用速记属性 flex：1 width：96％，使用 flex：1 。

---

您写道： / b>

所以目前它被设置为96％，这看起来不错，直到你真的挤压屏幕 - 然后右手div有点饿

固定宽度div的压扁与另一个flex属性有关：柔性收缩

默认情况下，flex项目被设置为 flex-shrink：1 ，使它们缩小以防止容器溢出。

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

有关详细信息，请参阅 flex-shrink 因子 部分。 >

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

---

了解更多关于沿着主轴 here：

• 在CSS Flexbox，为什么没有证明项目和自我辩护属性？

了解更多关于 cross axis 横轴的信息：

>

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

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.

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:

the right one is always the same; you on the left - you get everything that's left

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

解决方案

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.

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

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

---

You wrote:

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.

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

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

To disable this feature use flex-shrink: 0.

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

• What are the differences between flex-basis and width?

---

Learn more about flex alignment along the main axis here:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

• How does flex-wrap work with align-self, align-items and align-content?

这篇关于使div填充剩余*水平* flexbox中的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！