CODEWITHSUNDEEP
htmlcssflexbox
Hedge
Hedge

Reputation: 16748

Wrap flexbox items in half steps automatically

At a screen width of 1400px or more I display 4 flexbox items in one row. At lower screen widths that I want to display 2 flexbox items in a row and on an even smaller devices only one item per row.

The default flex-wrap behaviour is that it wraps one after one (from 4 to 3 to 2 to 1).

Is there an easy way to achieve this wrap behaviour using flexbox?

Here is a codepen with the default wrap behaviour: https://codepen.io/anon/pen/dVOVaG

CSS

.outerDiv {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 0rem;
  margin-left: 0rem;
}

.innerDiv {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.imageDiv {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

HTML

<div class="outerDiv">
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
<img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg">
    </div>
  </div>
</div>

Upvotes: 2

Views: 2863

Answers (1)

Asons
Asons

Reputation: 87191

Is there an easy way to achieve this wrap behaviour using flexbox?

No, Flexbox doesn't have a property that tell them to wrap the items by 2 at a time.

The simplest in this case is to wrap them 2 by 2 in the markup, here done removing twoinnerDiv, and then make the remaining innerDiv's also flex containers (nested Flexbox containers/items).

.outerDiv, .innerDiv {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.innerDiv {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.imageDiv {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
<div class="outerDiv">
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
<img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg">
    </div>
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg">
    </div>
  </div>
</div>

To keep the existing markup, use a media query and set the innerDiv to min-width: 50% at your break point < 1400px (max-width: 1399px)

.outerDiv {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.innerDiv {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.imageDiv {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 1399px) {
  .innerDiv {
    min-width: 50%;
  }
}
<div class="outerDiv">
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/harrypotterandthecursedchild_58482_1_1_20160804105944.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
<img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/fcbarcelona_431_1_1_20160908181513.jpg">
    </div>
  </div>
  <div class="innerDiv">
    <div class="imageDiv">
      <img src="http://stwv-s3.global.ssl.fastly.net/filestore/season/image/bethhart_1880_1_3_20161201140946.jpg">
    </div>
  </div>
</div>

Upvotes: 3

Related Questions