html - 使用 flexbox 检测换行

Question

我知道，这是一个奇怪的问题。想象一下元素列表。垂直放置。当我的列表必须在多个列上时，有没有办法“检测”？ (因为空间不足)？

我想一个例子更有效: http://jsfiddle.net/KCarnaille/au8mpo9t/4/

.right{
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start; //change the option when 2 cols needed
}

我不是在谈论媒体查询 我想要的取决于元素长度，而不是屏幕尺寸。

我认为 使用 CSS 是不可能的，但是，让我们看看 :)

我想要什么:

Answer 1

我想你可能想要这样的东西:

.right::after {
  content: '';   /* Insert pseudo-element at the end */
  margin: auto;  /* Push other elements as much as possible */
}

body {
  display: flex;
}
.right {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  background-color: black;
  height: 400px;
  flex: 1;
  margin: 5px;
}
.right::after {
  content: '';
  margin: auto;
}
.thumb {
  color: #fff;
  border: 1px solid red;
  padding: 10px;
  background-color: #fff;
  color: #000;
}

<div class="right">
  <div class="thumb">1</div>
  <div class="thumb">2</div>
  <div class="thumb">3</div>
  <div class="thumb">4</div>
  <div class="thumb">5</div>
  <div class="thumb">Layout doesn't need to be on two columns,<br/>so I change justify-content property to flex-start</div>
</div>
<div class="right">
  <div class="thumb">1</div>
  <div class="thumb">2</div>
  <div class="thumb">3</div>
  <div class="thumb">4</div>
  <div class="thumb">5</div>
  <div class="thumb">6</div>
  <div class="thumb">7</div>
  <div class="thumb">8</div>
  <div class="thumb">9</div>
  <div class="thumb">Layout needs to be on two columns,<br/>so I change justify-content property to space-between</div>
</div>