Question

我知道有很多与css侧边栏和flexbox有关的问题，但我的情况有点不同。

我有4个div并希望例如将第3个div作为更大屏幕的侧边栏，所以在小屏幕中所有4个项目都遵循他们的标记顺序，但是在大的我希望将第3个div放在左边所有其他div的一面，宽度为25％。

有position: absolute的解决方案但是当侧边栏div大于所有其他边栏div并且与其他内容重叠时，这会导致问题。

我的方法是使用flexbox，但我无法让它正常工作，直到现在我所拥有的是this fiddle：

.flex {
  display: flex;
  height: 300px;
  flex-direction: column;
  flex-wrap: wrap;
}

@media (min-width: 40em) {
  .sidebar {
    width: 25%;
    height: 100%;
    order: -1;
  }

  .column {
    width: 75%;
  }
}

现在这个问题存在一些问题：

如果我不给.flex一个高度，整个概念都不起作用，但我不能给它一个固定的高度......
当.columns的内容超出.flex的高度时，.sidebar会在非常小的屏幕上单独包裹。

.flex

.flex仍会与其他内容重叠。

因此，当您看到我的问题在技术上位于MODEL RESULT DATE SECTION AABBCC 10.5 1/1/2001 1 AABBCC 15.6 1/1/2001 2 AABBCC 42.2 1/1/2001 3 AABBCC 35.4 1/1/2001 4 AABBCC 82.1 1/1/2001 5 AABBCC 95.3 1/1/2001 6 AABBCC 76.5 1/1/2001 7所需的高度时，您是否在那里看到了解决方案，或者在这种情况下使用flexbox的整个方法可能不是很明智？

Flexbox：将任意项目设为侧边栏

0 个答案: