使div填充剩余*水平* flexbox中的空间

我有一个柔性箱并排2个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> 

Answer 1

使用flex-grow属性可使Flex项目占用主轴上的可用空间。

此属性将尽可能扩展该项目，将长度调整为dynamic环境，如重新resize或添加/删除其他项目。

一个常见的例子是flex-grow: 1或者使用速记属性flex: 1 。

因此，而不是width: 96%在你的div，使用flex: 1 。

---

你写了：

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

固定宽度div的压扁与另一个flex属性相关： flex-shrink

默认情况下，Flex项目被设置为flex-shrink: 1 ，使其能够缩小以防止容器溢出。

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

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

• 弹性基础和宽度之间有什么区别？

---

在此处了解更多关于沿着主轴的弯曲alignment的信息：

• 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？

了解更多关于沿着交叉轴线的弯曲alignment的信息：

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