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

2022-04-02 00:00:00 css flexbox css-grid

我有一个带有元素的灵活布局。我希望其中一个始终位于右上角。 当我把它放出容器(下面是蓝色的)时,它适用于基本的情况,但在我的最后一个例子中,我希望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>

相关文章