我正在尝试使用flexbox对齐时间轴栏上的项目。我希望能够在行的开头处开始第一个圆圈,并且在中心项目居中的情况下将最后一个圆圈放在行的末尾。这可能使用flexbox吗?现在我正在使用
ul {
display: flex;
}
li {
align-items: center;
}
答案 0 :(得分:1)
当然,你可以用Flexbox做到这一点(Flexbox就是生活:P)。
只需要ul css:
OwnerDrawFixed
你需要检查这个惊人的帖子 - A Complete Guide to Flexbox
答案 1 :(得分:1)
COLUMNS
适用于父元素,并控制Flexbox横轴上的对齐方式。在您的情况下,您需要再次将usageTime
应用于父元素,如下所示:
align-items
您可以查看非常详细的Flexbox细分on CSS Tricks,了解有关它的更多信息。
答案 2 :(得分:0)
使用flexbox和绝对定位的元素,您可以实现此目的:
*,
*:before,
*:after {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
position: relative;
}
ul:before {
content: "";
position: absolute;
left: 0;
width: 100%;
top: 20px;
border-top: 1px solid #aaa;
}
li {
margin: 0;
padding: 0;
text-transform: uppercase;
text-align: center;
flex: 1 0 0;
margin-top: 40px;
position: relative;
}
li:before {
content: "";
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, -150%);
width: 20px;
height: 20px;
border: 2px solid yellow;
border-radius: 100%;
background-color: #fff;
}
li.selected:before {
background-color: yellow;
}

<ul>
<li class="selected">Create account</li>
<li>Understand your role</li>
<li>Share stories</li>
</ul>
&#13;
答案 3 :(得分:-2)
您可以在每个项目上使用属性align-self
来执行此操作,在父元素上使用它的问题是子项将与父项所说的对齐。因此,第一项align-self:flex-start
,第二项align-self:center
和最后一项align-self:flex-end
(列出项目)。
有关flex的有用指南:http://jonibologna.com/flexbox-cheatsheet/