html - 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 的 flex 子元素。请参阅下面的演示:

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