Question

我想创建一个包含两个元素的行，右边的元素具有固定的宽度，左边的元素填充剩余的空间。这似乎就像是为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而不是float来解决这个问题。

Answer 1

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

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

获取Flexbox项目以填充剩余空间

1 个答案: