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

你可以用这个替换你的.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>

Answer 2

使用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>