将最后两个flex项目放在容器的末尾

时间:2018-12-12 12:47:00

标签: css flexbox

我有一个Tabs标头组件,需要将最后两个项目放置在右侧。我的代码看起来像这样

li:nth-last-child(1),
  li:nth-last-child(2) {
    color: #c2c2c2;
    margin-left: auto;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
}

最后一个项目(1)对齐到末尾,但第二个项目(2)放置在靠近容器中心的位置。有没有更好的方法可以使用这种方法解决此问题?

1 个答案:

答案 0 :(得分:1)

仅在margin-left: auto;上应用li:nth-last-child(2)margin-left: auto;将项目和随后的项目推到右侧。 这是有关弹性和边距的快速article

更新的代码:

li:nth-last-child(1),
li:nth-last-child(2) {
    color: #c2c2c2;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
}

li:nth-last-child(2) {
    margin-left: auto;
}