如何在Flex元素中获得浮动行为？

Question

左边有一个大项目，右边有很多小项目。如果浏览器窗口足够大，我希望将小项目放到＆＃34; float＆＃34;以柱状方式使它们不超过大项目的高度。但是，当浏览器缩小时，我希望将小项目包装在单行中的大项目下面。

这是一个用于演示的代码集：https://codepen.io/anon/pen/WXQdEN

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

该表显示了大分辨率下红框的所需行为。随着浏览器的缩小，盒子会浮动以填充空间。

但是当浏览器变得太小而无法容纳它们时，我想要一个弹性行为，其中红色框在绿色框下面包裹。我知道这不起作用，因为我无法在flex中浮动项目，但我不了解如何在没有浮动的情况下实现类似的行为。我只想使用flex和CSS来实现这一点。这可能吗？

感谢您的帮助。

Answer 1

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

此外，没有可以设置的属性来定义顺序，但是有媒体查询，我们可以设置一个断点，在这种情况下，用它来告诉允许container换行。

从flex-wrap: wrap移除container，然后使用媒体查询将其添加回所需的最大宽度。

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

Stack snippet

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;