Flexbox жидкость горизонтальная прокрутка

Question

У меня есть домашняя страница (веб-сайт с горизонтальной прокруткой), которая будет следовать дизайну из 1 столбца 1 строки, 1 столбца 2 строки, 1 столбца 3 строки, а затем циклически проходить.Есть ли способ нацеливания с использованием display flex, но без использования класса spot и stripe, который я использовал.

Это будет легче следовать в нашем шаблоне, если мы сможем удалить классы.Этот сайт будет прокручиваться в горизонтальном направлении, поэтому необходимо будет учитывать дизайн.

Концепция дизайна:

.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

Использование 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>

Использование сетки

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

Answer 2

Вы можете просто заменить ваши классы .spot и .stripe на эти - .lightbox > * будет нацелен на * первых потомков lightbox:

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

Обратите внимание, что flex: 1 1 100% достаточно дляпокройте изгиб дочерних элементов lightbox.Смотри демо ниже:

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

Вы можете использовать более новую CSS Grid layout, чтобы упростить разметку и стилизацию с помощью 6 строксетка, которая автоматически пропускает в столбцах - см. демонстрацию ниже:

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