我有一个主页(水平滚动网站),该主页将遵循以下设计: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>
您可以只用以下内容替换您的.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>
您可以使用6行网格来自动更新列中的内容,CSS Grid layout
以使用简化的标记和样式-请参见下面的演示:
.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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句