html - 如何在 Flex 元素中获取 float 行为？

Question

希望左侧有一件大件元素，右侧有许多小件元素。如果浏览器窗口足够大，我希望小元素以柱状方式“ float ”，这样它们就不会超过大元素的高度。但是，当浏览器缩小时，我希望小项在大项下方成一行。

这里有一个代码笔来演示:https://codepen.io/anon/pen/WXQdEN

div.container {
  display: flex;
  flex-wrap: wrap;
}

div.right-variable {
  max-height: 320px;
  align-items: center;
}

div.test-700 {
  width: 700px;
  height: 320px;
  background: green;
  color: #ffffff;
  font-size: 40px;
}

div.test-100 {
  width: 100px;
  height: 100px;
  background: red;
  outline: 1px solid black;
  margin: 2px;
  float: left;
}

<table>
  <tr>
    <td>
      <div class="test-700">Example Table</td>
    </td>
    <td>
      <div class="test-100"></div>
      <div class="test-100"></div>
      <div class="test-100"></div>
      <div class="test-100"></div>
      <div class="test-100"></div>
      <div class="test-100"></div>
    </td>
  </tr>
</table>
<div class="container">
  <div class="left-fixed">
    <div class="test-700">Non-Working Flex</div>
  </div>
  <div class="right-variable">
    <div class="test-100"></div>
    <div class="test-100"></div>
    <div class="test-100"></div>
    <div class="test-100"></div>
    <div class="test-100"></div>
    <div class="test-100"></div>
  </div>
</div>

该表显示了大分辨率下红框的预期行为。随着浏览器缩小，方框会四处漂浮以填充空间。

但是当浏览器变得太小而无法容纳它们时，我想要红色框在绿色框下包裹的 flex 行为。我知道这是行不通的，因为我不能在 flex 中 float 元素，但我不明白如何在没有 float 的情况下实现类似的行为。我只想使用 flex 和 CSS 来实现这一点。这可能吗？

感谢您的帮助。

Answer 1

这里的主要问题与包装顺序有关，由于浏览器不知道在另一个之前包装哪个，因此它们从外部元素开始。

此外，没有可以设置的属性来定义顺序，但是有媒体查询，我们可以在其中设置一个断点，在这种情况下，用它来告诉何时容器 允许包装。

从 container 中删除 flex-wrap: wrap 并使用媒体查询将其添加回所需的最大宽度。

然后还使 div.right-variable 成为一个 flex 容器，并使红色元素居中。

堆栈片段

div.container {
  display: flex;
}

div.right-variable {
  margin: auto 0;             /*  center vert. */
  max-height: 320px;  
  
  display: flex;
  flex-wrap: wrap;
}

div.test-700 {
  width: 700px;
  height: 320px;
  background: green;
  color: #ffffff;
  font-size: 40px;
}

div.test-100 {
  margin: auto 0;             /*  center vert. */
  width: 100px;
  height: 100px;
  background: red;
  outline: 1px solid black;
  margin: 2px;
}

@media (max-width: 816px) {
  div.container {
    flex-wrap: wrap;
  }
}

<div class="container">
  <div class="left-fixed">
    <div class="test-700">Working Flex</div>
  </div>
  <div class="right-variable">
    <div class="test-100"></div>
    <div class="test-100"></div>
    <div class="test-100"></div>
    <div class="test-100"></div>
    <div class="test-100"></div>
    <div class="test-100"></div>
  </div>
</div>