Flexbox fluid horizontal scrolling

Question

I have a homepage (horizontal scrolling website) that will follow a design of 1 column 1 row, 1 column 2 rows, 1 column 3 row, then looping through. Is there a way to target using display flex but without the spot and stripe class that I have used.

This will be easier to follow within our template if we can remove the classes. This site will be horizontal scrolling to, so that will need to come into account for the design.

Design concept:

.tiles {
  overflow-x: auto;
  overflow-y: hidden;
}
.tiles-list {
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  padding: 0;
}

.lightbox {
  height: 100%;
  display: flex;
  flex-flow: row wrap;
    width: 33.33vw;
    border: 1px solid #000;
}

.spot {
    flex: 1 1 50vh;
    height: auto;
    flex-basis:100%;
}
.strip {
    flex: 1 1 50vh;
    height: auto;
}

<div class="tiles">
    <div class="tiles-list">
        <div class="lightbox">
            <div class="spot" >
            </div>
        </div>
        <div class="lightbox">
            <div class="spot">
                <div class="blog-detail">
                    test
                </div>
            </div>
            <div class="strip">
                <div class="blog-detail">
                    test
                </div>              
            </div>
        </div>
        <div class="lightbox">
            <div class="strip">
                <div class="blog-detail">
                    test
                </div>                      
            </div>
            <div class="spot">
                <div class="blog-detail">
                    test
                </div>                      
            </div>
            <div class="strip">
                <div class="blog-detail">
                    test
                </div>                      
            </div>
        </div>

        <div class="lightbox">
            <div class="spot" >
            </div>
        </div>

    </div>
</div>

Answer 1

You can just replace your .spot and .stripe classes with this - .lightbox > * will target the *first descendants of lightbox:

.lightbox > * {
  flex: 1 1 100%;
  height: auto;
  border: 1px solid;
}

Note that flex: 1 1 100% is sufficient to cover the flexing of the lightbox child elements. See demo below:

.tiles {
  overflow-x: auto;
  overflow-y: hidden;
}

.tiles-list {
  height: 100vh;
  display: flex;
  flex-flow: column wrap;
  padding: 0;
}

.lightbox {
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  width: 33.33vw;
}

.lightbox > * { /* CHANGED */
  flex: 1 1 100%;
  height: auto;
  border: 1px solid;
}

<div class="tiles">
  <div class="tiles-list">
    <div class="lightbox">
      <div></div>
    </div>
    <div class="lightbox">
      <div>
        <div class="blog-detail">
          test
        </div>
      </div>
      <div>
        <div class="blog-detail">
          test
        </div>
      </div>
    </div>
    <div class="lightbox">
      <div>
        <div class="blog-detail">
          test
        </div>
      </div>
      <div>
        <div class="blog-detail">
          test
        </div>
      </div>
      <div>
        <div class="blog-detail">
          test
        </div>
      </div>
    </div>
    <div class="lightbox">
      <div></div>
    </div>
  </div>
</div>

You can use the newer CSS Grid layout to simplify the markup and styling by using a 6-row grid that auto-flows in columns - see demo below:

.tiles {
  overflow-x: auto;
  overflow-y: hidden;
}

.tiles-list {
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
  padding: 0;
}

.tiles-list>* {
  border: 1px solid;
  width: 33.33vw;
}

.tiles-list>*:nth-child(6n+1) {
  grid-row: span 6;
}

.tiles-list>*:nth-child(6n+2),
.tiles-list>*:nth-child(6n+3) {
  grid-row: span 3;
}

.tiles-list>*:nth-child(6n+4),
.tiles-list>*:nth-child(6n+5),
.tiles-list>*:nth-child(6n+6) {
  grid-row: span 2;
}

<div class="tiles">
  <div class="tiles-list">
    <div></div>
    <div class="blog-detail">test</div>
    <div class="blog-detail">test</div>
    <div class="blog-detail">test</div>
    <div class="blog-detail">test</div>
    <div class="blog-detail">test</div>
    <div></div>
  </div>
</div>

Answer 2

Using Flex

.tiles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 90vh;
  overflow: auto;
}
.tiles .tile {
  flex-basis: 100%;
  width: calc(100% / 3);
}
.tiles .tile:nth-child(6n+1) {
  flex-basis: calc(100% / 1);
}
.tiles .tile:nth-child(6n+2), .tiles .tile:nth-child(6n+3) {
  flex-basis: calc(100% / 2);
}
.tiles .tile:nth-child(6n+4), .tiles .tile:nth-child(6n+5), .tiles .tile:nth-child(6n+6) {
  flex-basis: calc(100% / 3);
}

.tiles .tile:nth-child(6n + 1) {
  background-color: #000000;
}
.tiles .tile:nth-child(6n + 2) {
  background-color: #CD0000;
}
.tiles .tile:nth-child(6n + 3) {
  background-color: #1C0174;
}
.tiles .tile:nth-child(6n + 4) {
  background-color: #F601CB;
}
.tiles .tile:nth-child(6n + 5) {
  background-color: #010600;
}
.tiles .tile:nth-child(6n + 6) {
  background-color: #137400;
}

<div class="tiles">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

Using Grid

.tiles {
  display: grid;
  grid-template-columns: calc(100% / 3);
  grid-template-rows: calc(100% / 6);
  grid-auto-columns: calc(100% / 3);
  grid-auto-flow: column;
  height: 90vh;
  overflow: auto;
}
.tiles .tile:nth-child(6n + 1) {
  grid-row-end: span 6;
}
.tiles .tile:nth-child(6n + 2), .tiles .tile:nth-child(6n + 3) {
  grid-row-end: span 3;
}
.tiles .tile:nth-child(6n + 4), .tiles .tile:nth-child(6n + 5), .tiles .tile:nth-child(6n + 6) {
  grid-row-end: span 2;
}
.tiles .tile:nth-child(6n + 1) {
  background-color: #000000;
}
.tiles .tile:nth-child(6n + 2) {
  background-color: #CD0000;
}
.tiles .tile:nth-child(6n + 3) {
  background-color: #1C0174;
}
.tiles .tile:nth-child(6n + 4) {
  background-color: #F601CB;
}
.tiles .tile:nth-child(6n + 5) {
  background-color: #010600;
}
.tiles .tile:nth-child(6n + 6) {
  background-color: #137400;
}

<div class="tiles">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>