Flexbox流体水平滚动

时间：2019-03-04 10:14:27

标签： html css css3 flexbox

我有一个主页（水平滚动网站），该页面将遵循以下设计：1列1行，1列2行，1列3行，然后循环浏览。有没有一种方法可以使用display flex定位，但是没有我使用的spot和stripe类。

如果我们可以删除这些类，那么在我们的模板中将更易于遵循。该站点将被水平滚动到，因此在设计时需要考虑到这一点。

设计理念： 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>

2 个答案:

答案 0 :(得分：2)

您可以仅使用以下内容替换您的.spot和.stripe类-.lightbox > *将针对lightbox的*第一代子孙：

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

请注意，flex: 1 1 100%足以覆盖lightbox子元素的 flexing 。参见下面的演示：

.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来简化 markup 和样式，方法是使用六行网格，它们在列中 auto-flows -请参见下面的演示：

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

答案 1 :(得分：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>

相关问题
最新问题