如何不对复杂的 flexbox 使用 absolute

Question

我希望使用 flexbox 实现响应式设计，但是我遇到了问题！

我的问题是在不使用绝对位置的情况下放置蓝色和绿色元素...假设灰色元素是图像而不是背景色！可能吗？

我把我要实现的元素分享给大家，每种颜色代表一个元素：

感谢您的反馈

Answer 1

使用 'position : relative' 怎么样？

下面是示例，如果您想了解更多信息，请查看！ https://developer.mozilla.org/en-US/docs/Web/CSS/position

.box-container {
  display: flex;
  flex-wrap : wrap;
  justify-content : center;
  aligh-items : center;
}

.box {
  width : 100%;
  height : 100px;
  background: red;
  color: white;
}

@media (min-width:500px){
   #three {
    position : relative;
    width : 100px;
    top: -150px;
    left: -150px;
    background: blue;
  }

  #four {
    position : relative;
    width : 100px;
    top: -150px;
    left: 150px;
    background: green;
  }
}

<div class="box-container">
  <div class="box" id="one">One</div>
  <div class="box" id="two">Two</div>
  <div class="box" id="three">Three</div>
  <div class="box" id="four">Four</div>
</div>

Answer 2

我会使用转换来实现这一点。

HTML

<header>
    <img src="..." alt="...">
</header>
<main>
    <div class="flexrow">
        <div class="blue"></div>
        <div class="green"></div>
    </div>
</main>

CSS

.flexrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%); // or translate(0,-50%)
}

这样，header 和 main 就会堆叠起来。然后让 flexrow 向上移动其自身高度的 50%。这样，我将重叠 header 和主要区域。

希望它有意义:)

如何不对复杂的 flexbox 使用 absolute

How not to use absolute with complex flexboxes

css

flexbox

responsive-design

responsive