使用Flexbox对齐末端的项目

Question

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

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

Answer 1

当然，你可以用Flexbox做到这一点（Flexbox就是生活：P）。

只需要ul css：

OwnerDrawFixed

你需要检查这个惊人的帖子 - A Complete Guide to Flexbox

Answer 2

COLUMNS适用于父元素，并控制Flexbox横轴上的对齐方式。在您的情况下，您需要再次将usageTime应用于父元素，如下所示：

align-items

您可以查看非常详细的Flexbox细分on CSS Tricks，了解有关它的更多信息。

Answer 3

使用flexbox和绝对定位的元素，您可以实现此目的：

＆＃13;

＆＃13;

*,
*: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;
}

＆＃13;

<ul>
  <li class="selected">Create account</li>
  <li>Understand your role</li>
  <li>Share stories</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

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