Flexbox：包装后改变方向

Question

我正在使用 Flexbox 在 HTML-page 中布置一些项目，没有问题。

在宽屏上看起来像这样：

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

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

这不行。

当然是这个样子了……元素一个个往下移动（绕）。但我不想那样。如果没有足够的 space 将它们全部三个排成一行，我希望将它们全部排成一列......总是这样。（如第二张图片。）

这可以用 flexbox 实现吗？也许使用 'order'，但它是如何工作的？或者我需要媒体查询吗？（我更喜欢 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>

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

Answer 1

一个选项是在 left/right 元素上将 flex-basis 设置为 100%。

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

Updated Example

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

Answer 2

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

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

Flexbox：包装后改变方向

Flexbox: Change direction after wrapping

html

css

flexbox