Flexbox：换行后改变方向

Question

我正在使用 Flexbox 在 HTML 页面中布局一些项目，没有问题。

在宽屏上看起来像这样：

这没关系。 在小型显示器上（在移动设备上），它看起来像这样：

这也没关系。 但是当我调整大小并从宽变小（中等显示宽度）时，它看起来像这样：

这不行。

当然看起来像这样......元素一个接一个地向下移动（环绕）。但我不希望那样。如果没有足够的空间将它们全部三个放在一行中，我希望将它们全部放在一列中......总是。 （如第二张图片。）

这对 flexbox 可行吗？也许使用“订单”，但它是如何工作的？ 或者我需要媒体查询吗？ （我更喜欢 CSS 而不是 JavaScript/JQuery）

这是代码：

.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>

这就是小提琴：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%;
    }
}

Answer 2

我更改了代码，以便在屏幕分辨率更改时， 显示变化。 如果您在 Mozilla 窗口中尝试，您会在一定宽度下看到： 包裹将以不同的方式显示 - 没有一切都被卡住的中间状态。

<style>
@media only screen 
and (max-width : 800px) 
 {

.score-container {
  border: 1px solid blue;
  background-color: #EEE;
 display:flex;
  justify-content: space-between;
  margin-bottom: 5px;
  height: 110px; 
}
div.score-container span {
  border: 1px solid #F00;
  background-color: #FF0;
  padding: 5px;
}


div.score-names {
  border: 1px solid green;
  background-color: #BBB;
  justify-content: space-around;
  align-items: baseline;
  display: flex;
  flex-flow: row wrap;
   max-width: 300px;
}
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;
}
    
}


.score-container {
  border: 1px solid blue;
  background-color: #EEE;
 display:flex;
  justify-content: space-between;
  margin-bottom: 5px;
  max-height: auto; 
}
div.score-container span {
  border: 1px solid #F00;
  background-color: #FF0;
  padding: 5px;
}



div.score-names {
  border: 1px solid green;
  background-color: #BBB;
  justify-content: space-around;
  align-items: baseline;
  display: flex;
  flex-flow: row wrap;
}
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>