html - Flexbox:包装后改变方向

Question

我正在使用 Flexbox 在 HTML 页面中布置一些元素，没有问题。

在宽屏幕上它看起来像这样:

没关系。 在小型显示器上(在移动设备上)它看起来像这样:

这也行。 但是当我调整大小并从宽变小(中等显示宽度)时，它看起来像这样:

这不行。

当然看起来是这样的……元素一个一个向下移动(绕)。但我不想那样。如果没有足够的空间将它们全部三个排成一行，我想将它们全部排成一列......总是这样。 (如第二张图片。)

这可以用 flexbox 实现吗？也许有“订单”，但它是如何工作的？ 或者我需要媒体查询吗？ (比起 JavaScript/JQuery，我更喜欢 CSS)

这是代码:

.score-container {
  border: 1px solid blue;
  background-color: #EEE;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
div.score-container span {
  border: 1px solid #F00;
  background-color: #FF0;
  padding: 5px;
}
div.score-names {
  border: 1px solid green;
  background-color: #BBB;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  flex-basis: auto;
  align-items: baseline;
}
div.score-names span {
  border: 1px solid red;
  background-color: #FF0;
  padding: 5px;
}
span.score-home, span.score-away {
  width: 250px;
  text-align: center;
}
span.score-score, span.score-label, span.score-action {
  min-width: 50px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
}
span.score-score {
  margin: 5px;
}

<div class="score-container">
  <span class="score-label">Match 01</span>
  <div class="score-names">
    <span class="score-home">Player 1</span>
    <span class="score-score">1 - 0</span>
    <span class="score-away">Player 2</span>
  </div>
  <span class="score-action">Change</span>
</div>

这是 fiddle :http://jsfiddle.net/RWCH/xgpgquk5/

Answer 1

一种选择是在左/右元素上将 flex-basis 设置为 100%。

正如您所建议的，媒体查询可能是可行的方法。由于宽度可能是动态的，所以困难的部分是确定媒体查询断点以放置此 CSS。

Updated Example

@media (max-width: 750px) {
    span.score-home, span.score-away {
        flex-basis: 100%;
    }
}