Question

我正在使用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>

这是CSS：

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

我在这里做了一个Flexbox vs. Float比较：http://codepen.io/coold78/full/yeagrp/

您可能会注意到我没有将所有右侧内容包装在div标记中（这将是一个简单的解决方案）但我想看看我是否可以创建与Float解决方案相同的布局使用flexbox而不使用包装器div作为右侧内容。

Flexbox项目从流程中断开

0 个答案: