html - 防止在 flex-direction 设置为 column 的 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>