html - 如何将 div 与 flex 对齐

Question

有一个 3 列的布局，当在移动设备上时，希望第 3 列低于第 2 列，并且不低于第 1 列的高度。第 2 列的高度可变，可以小于照片。

我的布局是这样的。

  .container {
  display: flex;
}

.left {
  flex: 0 0 150px;
}

.middle {
  flex: 1;
}

.right {
  flex: 0 0 225px;
}

@media (max-width: 768px) {
  .right {
    flex: 1 100%;
    padding-left: 150px;
  }
}

<div class="container">
  <div class="left">a</div>
  <div class="middle">b</div>
  <div class="right">c</div>
</div>

padding-left 将 .right 定位在 .middle 下方，但低于 .left 容器的底部。我想获取屏幕截图中的第二个 secnario，以便在小型设备上右侧列位于中间列的正下方

Answer 1

简单地包裹middle和right，使wrapper成为一个flex容器，然后，在较窄的屏幕上，改变它的 flex-direction 到 column

此外，在较窄的屏幕上，我们需要将container设置为align-items: flex-start，所以left/wrapper 高度基于其内容。

堆栈片段

.container, .wrapper {
  display: flex;
}

.left {
  flex: 0 0 150px;
}

.middle, .right {
  flex: 1;
}

.wrapper {
  flex: 0 0 225px;
}

@media (max-width: 768px) {
  .container {
    align-items: flex-start;
  }
  .wrapper { 
    flex-direction: column;
  }
}

.left, .middle, .right {
  border: 1px solid gray;
}

<div class="container">
  <div class="left">a</div>
  <div class="wrapper">
    <div class="middle">b, made this higher<br>to show how it wraps</div>
    <div class="right">c</div>
  </div>
</div>