html - 我如何让 3 个 div 并排放置，最右边的 div 占据剩余宽度？

Question

我有一个布局，其中有一个小栏(不是导航栏)，然后在它下面，我有 3 个向左浮动的 div。如何让最右边的占据页面剩余的宽度？

Answer 1

在父级上使用 flex 而不是 float 子级，然后设置你想要占用剩余空间的那个使用 flex-grow: 1

.flex {
  display: flex;
}
.pancakes {
  flex-grow: 1;
  background: #eee;
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div class="pancakes">3</div>
</div>