Flexbox：包装后改变方向

Question

我正在使用Flexbox来布局HTML页面中的某些项目，没有任何问题。

在宽屏上显示如下：

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

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

这不行。

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

这可以用flexbox吗？也许用＆＃39; order＆＃39;，但这是如何工作的？ 或者我需要媒体查询吗？ （我更喜欢CSS而不是JavaScript / JQuery）

这是代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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