flexbox布局中的“浮动”div [重复]

Question

编辑：链接的问题“Is it possible for flex items to align tightly to the items above them?”确实非常相似，并提供了很多有用的信息。但是，我在此处提供的解决方案并未在该问题中提及。根据您的情况，您必须决定哪种解决方案最适合您！

原始问题

我有一个基于 flexbox 的 HTML/CSS 布局。但是我在桌面上定位框“三”时遇到问题。我希望它在“二”框下方“浮动”。

这是我目前的样子

这是它的代码：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}

.box {
  background-color: lightblue;
  width: calc(50% - 20px);
  margin: 10px;
}

@media (max-width: 600px) {
  .box {
    width: 100%;
  }
  
  .one {
    order: 2;
  }
  
  .two {
    order: 1;
  }
  
  .three {
    order: 3;
  }
}

footer {
  background-color: lightpink;
}

<div class="wrapper">
  <div class="box one">
    <p>One</p>
    <p>
      This is the main content. This box will always be the largest (tallest) of them all.
    </p>
    <p>
      On desktop this should always be the only box to the left, and it should take up half of the available width. Box "Two" should always be displayed top-right, and box "Three" should always be displayed below box "Two".
    </p>
    <p>
      On mobile all boxes should stack vertically, with "Two" on top, then "One" and last (on the bottom) I want "Three"
    </p>
    <p>
      There is also a footer that needs to be full-width, and below all of these boxes ("One", "Two" and "Three")
    </p>
  </div>
  <div class="box two">
    <p>Two</p>
    <p>Top-right on desktop. Top (full-width) on mobile</p>
  </div>
  <div class="box three">
    <p>Three</p>
    <p>Below "Two" on desktop. Below "One" on mobile (full-width)</p>
  </div>
</div>
<footer>Footer content below boxes</footer>

这就是我想要的桌面浏览器：

这是我想要（并且目前已经拥有）在移动设备上的东西

桌面上想要的布局很容易使用浮动完成，例如https://jsfiddle.net/x9hhe6r3/，但使用浮动很难在移动设备上正确完成

---

解决方案

我找到了一个适合我的解决方案 :D

所以正如我在原始问题中所写的那样，我只需在桌面上使用浮点数就可以轻松解决它。但这不适用于移动设备，因为这些盒子最终会以错误的顺序排列。对于移动设备，我需要 flexbox，因为这让我可以独立于 div 在 HTML 中的顺序重新排序内容。

所以，使用@media 我只需在浮动和弹性框之间切换！

这是可行的解决方案：

.box {
  float: left;
  background-color: lightblue;
  width: calc(50% - 20px);
  margin: 10px;
}

@media (max-width: 600px) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
  }
  
  .box {
    width: 100%;
  }

  .one {
    order: 2;
  }

  .two {
    order: 1;
  }

  .three {
    order: 3;
  }
}

footer {
  background-color: lightpink;
  clear: both;
}

<div class="wrapper">
  <div class="box one">
    <p>One</p>
    <p>
      This is the main content. This box will always be the
      largest (tallest) of them all.
    </p>
    <p>
      On desktop this should always be the only box to the left,
      and it should take up half of the available width. Box
      "Two" should always be displayed top-right, and box "Three"
      should always be displayed below box "Two".
    </p>
    <p>
      On mobile all boxes should stack vertically, with "Two" on
      top, then "One" and last (on the bottom) I want "Three"
    </p>
    <p>
      There is also a footer that needs to be full-width, and
      below all of these boxes ("One", "Two" and "Three")
    </p>
  </div>
  <div class="box two">
    <p>Two</p>
    <p>Top-right on desktop. Top (full-width) on mobile</p>
  </div>
  <div class="box three">
    <p>Three</p>
    <p>Below "Two" on desktop. Below "One" on mobile (full-width)</p>
  </div>
</div>
<footer>Footer content below boxes</footer>

Answer 1

我们可以通过在大屏幕包装器上使用以下属性来实现所需的输出：

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: /* TALLEST BOX HEIGHT */
}

max-height 既可以在 CSS 中使用，也可以在 JS 中使用。

我也知道媒体查询中的缺陷。将在几个小时内完成。

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box {
  background-color: lightblue;
  margin: 10px;
  width: 50%;
}

@media (min-width: 600px) {
  .wrapper {
    max-height: 340px;
  }
}

@media (max-width: 600px) {
  .box {
    width: 100%;
  }
  .one {
    order: 2;
  }
  .two {
    order: 1;
  }
  .three {
    order: 3;
  }
}

footer {
  background-color: lightpink;
}

<div class="wrapper">
  <div class="box one">
    <p>One</p>
    <p>
      This is the main content. This box will always be the largest (tallest) of them all.
    </p>
    <p>
      On desktop this should always be the only box to the left, and it should take up half of the available width. Box "Two" should always be displayed top-right, and box "Three" should always be displayed below box "Two".
    </p>
    <p>
      On mobile all boxes should stack vertically, with "Two" on top, then "One" and last (on the bottom) I want "Three"
    </p>
    <p>
      There is also a footer that needs to be full-width, and below all of these boxes ("One", "Two" and "Three")
    </p>
  </div>
  <div class="box two">
    <p>Two</p>
    <p>Top-right on desktop. Top (full-width) on mobile</p>
  </div>
  <div class="box three">
    <p>Three</p>
    <p>Below "Two" on desktop. Below "One" on mobile (full-width)</p>
  </div>
</div>
<footer>Footer content below boxes</footer>