如何在灵活的布局中拥有固定元素(如浮动：Right)？

问题描述

我有一个带有元素的灵活布局。我希望其中一个始终位于右上角。当我把它放出容器(下面是蓝色的)时，它适用于基本的情况，但在我的最后一个例子中，我希望5个盒子在固定的盒子下面。我怎样才能做到这一点呢？也许可以用网格？我从来没有用过它们。另一种方法是说该元素的空间应该由flex元素保留/不使用。这样，我可以用position: absolute;将固定的元素放在那里

推荐答案

css网格可以做到这一点，固定元素可以位于容器内的任何位置：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  grid-auto-flow:dense;
  grid-gap:5px;
}

.container > div {
  height:50px;
  background:red;
}

.container  .fixed {
  grid-column-end:-1; /* last column */
  grid-row:1; /* first row */
  background:green;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div class="fixed"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>