创建具有最小高度的2列弹性框

Question

我有以下HTML布局：

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

儿童的数量及其高度可能会有所不同。是否可以设置父元素的样式以将子元素分成两列，以便父元素占用最小高度？

.parent {
  display: flex;
  flex-flow: column wrap;
  margin: 0 -5px;
  width: 500px;
  height: 1500px; /* I want to remove this */
}

.child {
  margin: 0 5px 10px;
  width: 50%;
  background: #f2f2f2;
  border: 1px #ccc solid;
  padding: 20px;
}

<div class="parent">
  <div class="child">
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc gravida, bibendum magna ut, rutrum dui. Vivamus pulvinar, tellus at tempor imperdiet, elit lectus eleifend dui, in molestie nisi mauris at sem. Nulla varius sapien ipsum, sed semper
      nisl lacinia vel. Maecenas aliquet, ante eu feugiat iaculis, massa diam tincidunt est, id ornare nisi massa nec arcu. Nunc porta leo at diam aliquam eleifend. Cras vel diam dignissim, egestas lacus in, egestas ipsum. Aliquam ultricies justo et magna
      dignissim auctor.</p>
  </div>
  <div class="child">
    <h3>Heading 2</h3>
    <p>Nam scelerisque hendrerit efficitur. Fusce quam mi, viverra ut enim sit amet, viverra dignissim tortor. Quisque laoreet eros sit amet ex rutrum pharetra. </p>
  </div>
  <div class="child">
    <h3>Heading 3</h3>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor orci, hendrerit vel diam et, rhoncus pellentesque quam. Donec nec porttitor urna. Nam interdum a tellus in bibendum. Etiam ac ultricies elit.

    </p>
  </div>
  <div class="child">
    <h3>Heading 4</h3>
    <p>Morbi quis tortor interdum, ornare nibh interdum, maximus quam. Praesent elit urna, sodales sed mollis in, euismod quis ex. Maecenas nec tellus eu lectus varius placerat sed id eros. Donec imperdiet vulputate neque at varius. Sed nunc mauris, pretium
      pretium fringilla ut, consequat sit amet ligula. Aliquam velit odio, pharetra at tincidunt ut, interdum ut augue. Mauris ultrices, mi et congue accumsan, tellus nisl semper justo, ut consectetur purus tellus ut ipsum. Suspendisse a neque eros. Suspendisse
      sit amet lacus id tortor porta lobortis. Nam tincidunt, sem id porta congue, lectus dui iaculis enim, ac tristique erat mauris et mauris. Praesent neque mi, semper ornare ullamcorper eget, commodo a mauris. Curabitur sed commodo diam, a ullamcorper
      quam.</p>
  </div>
  <div class="child">
    <h3>Heading 5</h3>
    <p>Sed sit amet sem metus. Pellentesque id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
  </div>
  <div class="child">
    <h3>Heading 6</h3>
    <p>Fusce malesuada et magna eu dapibus. Vivamus aliquam venenatis libero, quis lobortis ante luctus nec. Nullam vel lectus justo. Etiam diam turpis, auctor in finibus eget, eleifend vel ex. Curabitur sit amet neque ex. Nulla dapibus placerat tortor,
      ac viverra arcu finibus mattis. Donec vel sem urna. Phasellus pretium ultricies ipsum, eu mollis magna rutrum sed. Mauris varius accumsan diam, a aliquet nibh tincidunt ac. Proin lobortis nunc eget enim pharetra, eu lobortis nisi placerat. Aliquam
      enim tortor, viverra non posuere ut, dapibus sed elit.</p>
  </div>
  <div class="child">
    <h3>Heading 7</h3>
    <p>Sed molestie congue lacinia. Proin cursus laoreet magna, a pharetra odio consequat et. Donec et ullamcorper massa. Fusce eu dapibus felis. Cras condimentum purus et eros finibus aliquam. In hac habitasse platea dictumst. Sed sit amet sem metus. Pellentesque
      id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
  </div>

</div>

http://codepen.io/anon/pen/NqLYjE

在上面的示例中，我通过为height元素设置parent来实现两列布局。我想在不设置height的情况下这样做。有可能吗？

将flex-direction设置为row是很丑陋的，因为当一行中的子项高度不相等时，两个垂直子元素之间会有空格。

Answer 1

我认为你需要column属性，而不是flex模型。

forked pen

.parent {
  -moz-column-count:2;
  column-count:2;
  -moz-column-gap:0;
  column-gap:0;
  margin: 0 -5px;
  width: 500px;
}

.child {
  margin: 0 5px 10px;
  background: #f2f2f2;
  border: 1px #ccc solid;
  padding: 20px;
}

<div class="parent">
  <div class="child">
    <h3>Heading 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc gravida, bibendum magna ut, rutrum dui. Vivamus pulvinar, tellus at tempor imperdiet, elit lectus eleifend dui, in molestie nisi mauris at sem. Nulla varius sapien ipsum, sed semper
      nisl lacinia vel. Maecenas aliquet, ante eu feugiat iaculis, massa diam tincidunt est, id ornare nisi massa nec arcu. Nunc porta leo at diam aliquam eleifend. Cras vel diam dignissim, egestas lacus in, egestas ipsum. Aliquam ultricies justo et magna
      dignissim auctor.</p>
  </div>
  <div class="child">
    <h3>Heading 2</h3>
    <p>Nam scelerisque hendrerit efficitur. Fusce quam mi, viverra ut enim sit amet, viverra dignissim tortor. Quisque laoreet eros sit amet ex rutrum pharetra. </p>
  </div>
  <div class="child">
    <h3>Heading 3</h3>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor orci, hendrerit vel diam et, rhoncus pellentesque quam. Donec nec porttitor urna. Nam interdum a tellus in bibendum. Etiam ac ultricies elit.

    </p>
  </div>
  <div class="child">
    <h3>Heading 4</h3>
    <p>Morbi quis tortor interdum, ornare nibh interdum, maximus quam. Praesent elit urna, sodales sed mollis in, euismod quis ex. Maecenas nec tellus eu lectus varius placerat sed id eros. Donec imperdiet vulputate neque at varius. Sed nunc mauris, pretium
      pretium fringilla ut, consequat sit amet ligula. Aliquam velit odio, pharetra at tincidunt ut, interdum ut augue. Mauris ultrices, mi et congue accumsan, tellus nisl semper justo, ut consectetur purus tellus ut ipsum. Suspendisse a neque eros. Suspendisse
      sit amet lacus id tortor porta lobortis. Nam tincidunt, sem id porta congue, lectus dui iaculis enim, ac tristique erat mauris et mauris. Praesent neque mi, semper ornare ullamcorper eget, commodo a mauris. Curabitur sed commodo diam, a ullamcorper
      quam.</p>
  </div>
  <div class="child">
    <h3>Heading 5</h3>
    <p>Sed sit amet sem metus. Pellentesque id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
  </div>
  <div class="child">
    <h3>Heading 6</h3>
    <p>Fusce malesuada et magna eu dapibus. Vivamus aliquam venenatis libero, quis lobortis ante luctus nec. Nullam vel lectus justo. Etiam diam turpis, auctor in finibus eget, eleifend vel ex. Curabitur sit amet neque ex. Nulla dapibus placerat tortor,
      ac viverra arcu finibus mattis. Donec vel sem urna. Phasellus pretium ultricies ipsum, eu mollis magna rutrum sed. Mauris varius accumsan diam, a aliquet nibh tincidunt ac. Proin lobortis nunc eget enim pharetra, eu lobortis nisi placerat. Aliquam
      enim tortor, viverra non posuere ut, dapibus sed elit.</p>
  </div>
  <div class="child">
    <h3>Heading 7</h3>
    <p>Sed molestie congue lacinia. Proin cursus laoreet magna, a pharetra odio consequat et. Donec et ullamcorper massa. Fusce eu dapibus felis. Cras condimentum purus et eros finibus aliquam. In hac habitasse platea dictumst. Sed sit amet sem metus. Pellentesque
      id rhoncus felis, nec condimentum ligula. Aliquam porta erat sapien, ac efficitur nisi blandit a. Nulla congue urna ac nisi tempor ultrices. Nunc eget risus ut tortor iaculis facilisis.</p>
  </div>

</div>