我有两个潜水员并排在一个flexxbox。右手边的那条应该总是一样宽,我想让左手边的那条抓住剩下的空间。但它不会,除非我特别设置它的宽度。

所以目前,它被设置为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>


当前回答

基本上,我试图让我的代码在“行”上有一个中间部分,以自动调整两边的内容(在我的情况下,虚线分隔符)。就像@Michael_B建议的那样,关键是在行容器上使用display:flex,并且至少确保行上的中间容器的flex- growth值至少比外部容器高1(如果外部容器没有应用任何flex- growth属性,那么中间容器只需要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>

其他回答

使用flex-grow属性使伸缩项目消耗主轴上的空闲空间。

此属性将尽可能地展开项目,根据动态环境调整长度,例如重新调整屏幕大小或添加/删除其他项目。

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

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


你写的:

所以目前,它被设置为96%,看起来还可以,直到你真的压扁屏幕-然后右边的div就会有点缺乏它所需要的空间。

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

默认情况下,伸缩项被设置为flex-shrink: 1,允许它们收缩,以防止容器溢出。

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

有关更多详细信息,请参阅这里的答案中的伸缩因子部分:

弹性基和宽度有什么区别?


在这里了解更多关于沿着主轴的伸缩对齐:

在CSS Flexbox中,为什么没有“justify-items”和“justify-self”属性?

在这里了解更多关于沿着十字轴的伸缩对齐:

flex-wrap如何与align-self, align-items和align-content一起工作?

基本上,我试图让我的代码在“行”上有一个中间部分,以自动调整两边的内容(在我的情况下,虚线分隔符)。就像@Michael_B建议的那样,关键是在行容器上使用display:flex,并且至少确保行上的中间容器的flex- growth值至少比外部容器高1(如果外部容器没有应用任何flex- growth属性,那么中间容器只需要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>