是否可以使用flex构建以下布局而不进行嵌套？

Question

示例：

是否可以在没有嵌套的情况下使用flex构建这种布局？纯粹，有这样的结构：

<div class="long">
</div>

<div class="short">
</div>

<div class="short">
</div>

<div class="short">
</div>

<div class="short">
</div>

Answer 1

不确定。见下文

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  max-height: 200px;
  max-width: 320px;
}

.long {
  background-color: red;
  border: thin solid darkgray;
  width: 100px;
  height: 200px;
}

.short {
  background-color: blue;
  border: thin solid darkgray;
  width: 100px;
  height: 100px;
}

<div class="container">
  <div class="long"></div>
  <div class="short"></div>
  <div class="short"></div>
  <div class="short"></div>
  <div class="short"></div>
</div>

*