填充弹性容器中剩余的高度或宽度
[英] Fill the remaining height or width in a flex container
本文介绍了填充弹性容器中剩余的高度或宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 flexbox 中并排放置了 2 个 div.右手的应该总是相同的宽度，我希望左手抓住剩余的空间.但除非我专门设置它的宽度，否则它不会.
所以目前，它设置为 96%，这看起来不错，直到你真正压扁屏幕 - 然后右手边的 div 会有点缺乏它所需的空间.
我想我可以保持原样，但感觉不对 - 就像必须有一种说法:
<块引用>
正确的总是一样的；你在左边 - 你得到了剩下的一切
.ar-course-nav {光标:指针；填充:8px 12px 8px 12px；边框半径:8px；}.ar-course-nav:悬停{背景颜色: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="课程名称真的很长而且会持续一段时间，但是当您认为它停止时，它会继续持续更长时间！">课程名称真的很长而且会持续一段时间，但是当您认为它停止时，它会继续持续更长时间！
<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 style="color:#555555; text-align:right; white-space:nowrap;">创建时间:2016 年 9 月 21 日
<div style="margin-left:8px;"><strong>></strong>
解决方案
使用 flex-grow 属性使 flex 项占用主轴上的可用空间.
此属性会尽可能地扩展项目，调整长度以适应动态环境，例如调整屏幕大小或添加/删除其他项目.
一个常见的例子是 flex-grow: 1 或者，使用速记属性，flex: 1.
因此，在您的 div 上使用 flex: 1 而不是 width: 96%.
<小时>你写道:
<块引用>所以目前，它设置为 96%，这看起来不错，直到你真正压扁屏幕 - 然后右手边的 div 会有点缺乏它所需的空间.
固定宽度div的压扁与另一个flex属性有关:flex-shrink
默认情况下，弹性项目设置为 flex-shrink: 1 这使它们能够收缩以防止容器溢出.
要禁用此功能，请使用 flex-shrink: 0.
有关详细信息，请参阅此处回答中的flex-shrink 因素 部分:
<小时>在此处了解有关沿主轴的 flex 对齐的更多信息:
在此处了解有关沿横轴的 flex 对齐的更多信息:
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>></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:
Learn more about flex alignment along the main axis here:
Learn more about flex alignment along the cross axis here:
这篇关于填充弹性容器中剩余的高度或宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
