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>