使用Flexbox对齐末端的项目

时间:2017-07-12 23:55:08

标签: css flexbox

我正在尝试使用flexbox对齐时间轴栏上的项目。我希望能够在行的开头处开始第一个圆圈,并且在中心项目居中的情况下将最后一个圆圈放在行的末尾。这可能使用flexbox吗?现在我正在使用

ul {
   display: flex;
}
li {
   align-items: center;
}

enter image description here

4 个答案:

答案 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;
&#13;
&#13;

答案 3 :(得分:-2)

您可以在每个项目上使用属性align-self来执行此操作,在父元素上使用它的问题是子项将与父项所说的对齐。因此,第一项align-self:flex-start,第二项align-self:center和最后一项align-self:flex-end(列出项目)。

有关flex的有用指南:http://jonibologna.com/flexbox-cheatsheet/