CODEWITHSUNDEEP
htmlcssflexbox
devwannabe
devwannabe

Reputation: 3210

Achieve 6 rows on wide browser then 2 columns, 3 rows when in mobile width using Flexbox

I created a fiddle https://jsfiddle.net/mh4moyzy/ and I'm not sure what I need to add so that when width of browser is greater than the width of mobile which is 400px, make all of those boxes stack in rows and as wide as the browser width. That means there will be 6 rows and 1 column. In mobile, there will be 3 rows and 2 columns.

 .flex-container {
      padding: 0;
      margin: 0;
      list-style: none;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      justify-content: space-around;
    }
    .flex-item {
      background: tomato;
      padding: 5px;
      width: 200px;
      height: 150px;
      margin-top: 10px;
      line-height: 150px;
      color: white;
      font-weight: bold;
      font-size: 3em;
      text-align: center;
  }
 
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>

Upvotes: 1

Views: 27

Answers (1)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

You should use media query for that. For making flex items take all width and have column direction add this code

@media (min-width: 400px) {
  .flex-container {
    flex-direction: column;
  }

  .flex-item {
    width: auto;
  }
}

Also if you want to always have 2 columns in your mobile you can add this styles to .flex-item:

width: calc(50% - 10px);
box-sizing: border-box;

So example will look like:

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: calc(50% - 10px); /* replacing fixed width with percentage */
    height: 150px;
    margin-top: 10px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    box-sizing: border-box; /* Setting borders and paddings to be considered part of width */
}

@media (min-width: 400px) {
  .flex-container {
    flex-direction: column;
  }
  
  .flex-item {
    width: auto;
  }
}
<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
</ul>

Upvotes: 1

Related Questions