我正在尝试制作一个flexbox水平时间轴
我有了应用:nth-child(2n) { transform: translateY(100%); }
的想法,但我遇到了很多问题才能让它发挥作用:
overflow-x: auto;
也会自动添加overflow-y
,如果您隐藏overflow-y
,则只有一半的时间线可见还有另一种方法可以使用flexboxes吗?我也尝试了边距,但是项目位置没有很好地集中
@import "compass/css3";
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
/* This line make an undesired Y scrollbar */
overflow-x: auto;
}
.flex-item {
background: tomato;
width: 200px;
height: 150px;
color: white;
display: flex;
align-self: flex-end;
align-items: flex-end;
justify-content: center;
}
.flex-item:nth-child(2n) {
align-self: flex-end;
align-items: flex-start;
transform: translateY(100%);
}
/* Random heights for testing */
.flex-item:nth-child(5) {
height: 100px;
}
.flex-item:nth-child(3) {
height: 200px;
}
.flex-item:nth-child(4) {
height: 100px;
}
.flex-item:nth-child(6) {
height: 200px;
}

<div>
<p>This text is ok, but there is an undesired Y scrollbar on the timeline</p>
</div>
<ul class="flex-container">
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
</ul>
<div>
<p>This text should go after the timeline</p>
</div>
&#13;
答案 0 :(得分:0)
这是一个蹩脚但有效的解决方案; - )
将它作为第一个孩子添加到flexbox中(尽管你应该整理它)。
如果您希望将position:absolute/relative
叠加在时间线之上而不是之前,则可以使用@import "compass/css3";
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
/* Uncomment this line to see the issue */
/*overflow-x: auto;*/
}
.flex-item {
background: tomato;
width: 200px;
height: 150px;
color: white;
display: flex;
align-self: flex-end;
align-items: flex-end;
justify-content: center;
}
.flex-item:nth-child(2n) {
align-self: flex-end;
align-items: flex-start;
transform: translateY(100%);
}
/* Random heights for testing */
.flex-item:nth-child(5) {
height: 100px;
}
.flex-item:nth-child(3) {
height: 200px;
}
.flex-item:nth-child(4) {
height: 100px;
}
.flex-item:nth-child(6) {
height: 200px;
}
。
<ul class="flex-container">
<div style="clear: both;">
<p>This text should go before</p>
</div>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
</ul>
&#13;
this.myValueList = this.myValueList.reverse();
&#13;
答案 1 :(得分:0)
由于您使用translateY
向下移动项目,因此您需要定位相应的所有内容
我刚刚为您的div添加了一个班级other_content
,设置了position:relative
和top:200px
虽然你需要记住调整top
值,具体取决于你的物品有多大
.flex-item {
background: tomato;
width: 200px;
height: 150px;
color: white;
display: flex;
align-self: flex-end;
align-items: flex-end;
justify-content: center;
}
.flex-item:nth-child(2n) {
align-self: flex-end;
align-items: flex-start;
transform: translateY(100%);
}
/* Random heights for testing */
.flex-item:nth-child(5) {
height: 100px;
}
.flex-item:nth-child(3) {
height: 200px;
}
.flex-item:nth-child(4) {
height: 100px;
}
.flex-item:nth-child(6) {
height: 200px;
}
.other_content{
position:relative;
top:200px;
}
<div>
<p>This text is ok, but there is an undesired Y scrollbar on the timeline</p>
</div>
<ul class="flex-container">
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
<li class="flex-item"><span>text</span></li>
</ul>
<div class="other_content">
<p>This text should go after the timeline</p>
</div>