Css Flexbox项目从流程中断开

我正在使用flexbox创建布局，遇到了一个问题，一个块没有在上一个块的下方向上移动，而是被网格中的第一个块向下推

以下是HTML标记：

<div class="flex-wrap">

      <div class="flex-item flex-item-left">
        <div class="well">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
        </div>
      </div>

      <div class="flex-item flex-item-right">
        <div class="well">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
        </div>
      </div>

      <div class="flex-item flex-item-right">
        <div class="well">
          <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.</p>
        </div>
      </div>

      <div class="flex-item flex-item-right">
        <div class="well">
          <p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales.</p>
        </div>
      </div>

 </div>

我在这里对Flexbox和Float进行了比较：

---

您可能会注意到，我没有将所有右侧内容包装在

div

标记中（这将是一个简单的解决方案）但是我想看看我是否可以使用flexbox创建与浮动解决方案相同的布局，而不必为右侧内容使用包装器

div

。

这个答案可能会帮助您：这个解决方案似乎需要特定的框高。我想我需要将正确的项目包装在父

div

中。我提到的帖子有两个选项：使用内部包装器和维护兄弟关系（没有包装器）。这个答案的可能重复可能会帮助你：这个解决方案似乎需要特定的框高度。我想我需要将正确的项目包装在父

div

中。我提到的帖子有两个选项：使用内部包装器和维护兄弟关系（无包装器）。可能重复

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

.flex-item {
  flex: 0 1 66%;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: whitesmoke;
}

.flex-item-left {
  flex-basis: 30%;
  margin-right: auto;
}

.flex-item .well {
  background-color: tomato;
}