CODEWITHSUNDEEP
htmlcssflexbox
Brad
Brad

Reputation: 479

Flexbox fluid horizontal scrolling

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

Upvotes: 3

Views: 160

Answers (2)

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 2

yunzen
yunzen

Reputation: 33439

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>

Upvotes: 2

Related Questions