获取 flexbox 项目以填充剩余空间 [重复]

Posted 2023-03-06

【中文标题】获取 flexbox 项目以填充剩余空间 [重复]

【英文标题】：Getting a flexbox item to fill remaining space [duplicate]

【发布时间】：2019-03-18 05:53:04

【问题描述】：

我想创建一个包含两个元素的行，右侧具有固定宽度，左侧填充剩余空间。这看起来就像 flexbox 的用途一样，但我真的不知道该怎么做。我觉得我曾经有过它，但从那以后就无法复制了。我用我想做的事情创建了 plunker：

<div style="display: flex">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in lacus blandit, blandit ante quis, auctor lacus. Maecenas auctor suscipit arcu, vitae sagittis eros varius at. Nulla venenatis faucibus vestibulum. Suspendisse metus velit, ultricies sed molestie quis, congue nec magna. In eget orci et quam aliquam pellentesque. Duis finibus dui mollis odio vehicula tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Sed ornare sagittis pulvinar. Vivamus pulvinar ultricies tristique.
  </div>
  <div style="flex-basis: 150px">Right</div>
</div>

https://plnkr.co/edit/zn1CTY0VWJqtFoR8DxoC?p=preview

我也尝试过使用 flex-grow/shrink，但无法弄清楚。我希望用 flexbox 而不是浮点数来解决这个问题。

【参考方案1】：

您应该在第一个子元素上使用简写 flex: 1 而不是 flex-grow: 1。这会智能地设置其他属性。

工作版本： https://plnkr.co/edit/dT3qxYj7nvYN0xHT4yH8?p=preview