将 flex-direction 设置为列时防止 Flexbox 中换行

Question

HTML：

<div class="flex">
  <span>One</span>
  <span>two</span>
  <span>three</span>
  <span class="four">four</span>
  <span>five</span>
</div>

CSS：

.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
span {
  background: #999;
  margin-top:10px;
}
.four {
  background: #FFFF00;
}

基本上标题已经说明了这一点 - 如何将.four和内联.five spans到一行中？有可能吗？有什么想法吗？

https://jsfiddle.net/erghcuhw/

Answer 1

您必须使用flex-direction: row然后flex-wrap: wrap在 flex-container 和flex: 0 0 100%除第 4 个和第 5 个跨度之外的所有跨度上进行设置。

.flex {
  display: flex;
  flex-wrap: wrap;
}
span {
  background: #999;
  margin-top:10px;
  flex: 0 0 100%;
}
span:nth-child(4),
span:nth-child(5) {
  flex: 0 0 50%;
}
.four {
   background: #FFFF00;
}

<div class="flex">
  <span>One</span>
  <span>two</span>
  <span>three</span>
  <span class="four">four</span>
  <span>five</span>
</div>