css - 使用 Flexbox 对齐两端的元素

Question

我正在尝试使用 flexbox 对齐时间轴栏上的元素。我希望能够让第一个圆圈从行首开始，最后一个圆圈在行尾，中心项居中。这可能使用 flexbox 吗？现在我正在使用

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

Answer 1

align-items 应用于父元素并控制 flexbox 横轴上的对齐方式。在您的情况下，您需要 justify-content: space-between;，再次像这样应用于父元素:

ul {
   display: flex;
   justify-content: space-between;
}

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