我在 flexbox 中有 2 个并排的 div。右手边的宽度应该始终相同，我希望左手边的宽度只占剩余空间。但除非我专门设置它的宽度，否则它不会。
所以目前，它设置为 96%，这看起来不错，直到你真正挤压屏幕 - 然后右手 div 有点缺乏它需要的空间。
我想我可以保持原样，但感觉不对 - 就像必须有一种方式说：
对的总是一样的；你在左边 - 你得到了剩下的一切
.ar-course-nav { 光标：指针；填充：8px 12px 8px 12px；边框半径：8px； } .ar-course-nav:hover { 背景色: rgba(0, 0, 0, 0.1); }
grid-template-rows/columns
使用 flex-grow 属性使弹性项目消耗主轴上的空闲空间。
此属性将尽可能地扩展项目，根据动态环境调整长度，例如屏幕调整大小或添加/删除其他项目。
一个常见的示例是 flex-grow: 1，或者使用简写属性 flex: 1。
因此，不要在您的 div 上使用 width: 96%，而是使用 flex: 1。
你写了：
所以目前，它设置为 96%，这看起来不错，直到你真正挤压屏幕 - 然后右手 div 有点缺乏它需要的空间。
固定宽度 div 的挤压与另一个 flex 属性有关：flex-shrink
默认情况下，弹性项目设置为 flex-shrink: 1，这使它们能够缩小以防止容器溢出。
要禁用此功能，请使用 flex-shrink: 0。
有关详细信息，请参阅此处答案中的 flex-shrink 因素 部分：
flex-basis 和 width 有什么区别？
在此处了解有关沿主轴的 flex 对齐的更多信息：
在 CSS Flexbox 中，为什么没有“justify-items”和“justify-self”属性？
在此处了解有关沿交叉轴的 flex 对齐的更多信息：
flex-wrap 如何与 align-self、align-items 和 align-content 一起使用？
基本上我试图让我的代码在“行”上有一个中间部分，以自动调整两边的内容（在我的例子中，一个虚线分隔符）。就像@Michael_B 建议的那样，关键是在行容器上使用 display:flex 并至少确保行中的中间容器的 flex-grow 值至少比外部容器高 1（如果外部容器没有应用了任何 flex-grow 属性，中间容器只需要 1 个用于 flex-grow）。
这是我正在尝试做的事情的图片以及我如何解决它的示例代码。
https://i.stack.imgur.com/YgZW5.png
.row { 背景：浅灰色；高度：30px；宽度：100%；显示：弯曲；对齐项目：flex-end；边距顶部：5px； } .left { 背景：浅蓝色； } .separator{ 弹性增长：1； border-bottom:dotted 2px black; } .right { 背景：珊瑚； }
flex-grow: 1的效果与flex: 1不同。你可能知道为什么不一样吗？ （我解决了后者的问题，谢谢）flex-grow: 1，flex-basis属性保持在auto，它的默认值。使用flex: 1，flex-basis属性更改为0。请在此处查看我的答案以进行深入审查：stackoverflow.com/q/43520932/3597276 @WhGandalfmin-width: 0可用的空间更多的空间（或min-height:0是 flex 方向列），否则它将溢出布局中的可用空间，即老实说，超级奇怪。 stackoverflow.com/a/66689926/454780