CODEWITHSUNDEEP
htmlcssflexbox
RWC
RWC

Reputation: 5052

Flexbox: Change direction after wrapping

I am using Flexbox to layout some items in a HTML-page, without problems.

On a wide display it looks like this:

wide display

This is okay. And on a small display (on a mobile device) it looks like this:

small display

This is also okay. But when I resize and go from wide to small (medium display width), it looks like this:

in between

This is NOT okay.

Of course it looks like this...the elements move downwards (wrap) one by one. But I do not want that. If there is not enough space to have them all three on a row, I want to have them all three in a column... always. (Like in the 2nd image.)

Is this possible with flexbox? Maybe with 'order', but how does that work? Or do I need media queries for that? (I prefer CSS over JavaScript/JQuery)

This is the code:

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

And this is the fiddle: http://jsfiddle.net/RWCH/xgpgquk5/

Upvotes: 4

Views: 3485

Answers (2)

Assan Sanogo
Assan Sanogo

Reputation: 41

I changed the code so that, when the resolution of the screen changes, the display changes. if you try in a mozilla window, you will see that under a certain width: the wrap will be displayed in a different manner - without having the intermediary state where everything is jammed.

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

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240928

One option would be to set flex-basis to 100% on the left/right elements.

As you suggested, media queries are probably the way to go. Since the widths are likely dynamic, the hard part is determining the media query break point to place this CSS in.

Updated Example

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

Upvotes: 3

Related Questions